Woocommerce plugin – nested products for subcategories

I have a custom page to display some subcategory products related to a post.
I am using woocommerce shortcode [product_categories number="#" parent="#"].

The only problem is that this shortcode only display a list of the subcategories under the parent category.

Ideally i would love to have something like this:

SUBCAT 1

—– Product 1

—– Product 2

—– Product 3

SUBCAT 2

—– Product 1

—– Product 2

—– Product 3

and so on.

Does anyone know how this could be done?

Thank you very much!

PS: I am a newbie in php and in woocommerce…

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

You can override the archive.php to
The final result will be something like this.

  • SUBCAT 1

    —– Product 1

    —– Product 2

    —– Subcategory1 of SUBCAT 1

    ——– Product 1

    ——– Product 2

    ——– Product 3

    SUBCAT 2

    —– Product 1

    —– Product 2

    —– Product 3

<?php
    // Remove breadcrumb if needed
    $post_id = yiw_post_id();
    if( get_post_meta( $post_id, '_show_breadcrumbs_page', true ) == 'no' ) {
        remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
    }

    if( get_post_meta( $post_id, '_slogan_page', true ) ) {
        get_template_part('slogan');
    }
    /**
     * woocommerce_before_main_content hook
     *
     * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
     * @hooked woocommerce_breadcrumb - 20
     */
    do_action('woocommerce_before_main_content');
?>

    <h1 class="page-title"><?php if( get_post_meta( yiw_post_id(), '_show_title_page', true ) == 'yes' ) woocommerce_page_title(); ?></h1>

    <div class="clear"></div>

    <?php if ( is_tax() && get_query_var( 'paged' ) == 0 ) : ?>
        <?php echo '<div class="term-description">' . yiw_addp( term_description() ) . '</div>'; ?>
    <?php elseif ( ! is_search() && get_query_var( 'paged' ) == 0 && ! empty( $shop_page ) && is_object( $shop_page ) ) : ?>
        <?php echo '<div class="page-description">' . apply_filters( 'the_content', $shop_page->post_content ) . '</div>'; ?>
    <?php endif; ?>

    <?php if ( have_posts() ) : ?>
        <?php
        $args = array(
            'taxonomy' => 'product_cat',
        );

        $cats = get_categories($args);

        foreach ( $cats as $cat ):
            if ( !$cat->parent ):
                echo '<div class="clear"></div><h1>' . $cat->name . '</h1>';

                // display products which are directly associated with the product category TODO: display only direct products
                $args = array( 'post_type' => 'product', 'posts_per_page' => -1, 'product_cat' => $cat->slug, 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'slug', 'terms' => $cat->slug, 'include_children' => false  ) ) );

                $wp_query = new WP_Query( $args );

                ?>
                <?php
                /**
                * woocommerce_pagination hook
                *
                * @hooked woocommerce_pagination - 10
                * @hooked woocommerce_result_count - 20
                * @hooked woocommerce_catalog_ordering - 30
                */
                do_action( 'woocommerce_before_shop_loop' );
                ?>

                <?php woocommerce_product_loop_start(); ?>

                <?php woocommerce_product_subcategories(); $woocommerce_loop['loop'] = 0; $woocommerce_loop['columns'] = 0; ?>

                <?php while ( have_posts() ) : the_post(); ?>

                    <?php woocommerce_get_template_part( 'content', 'product' ); ?>

                <?php endwhile; // end of the loop. ?>

                <?php                   
                // get children product categories
                $subcats = get_categories( array( 'hide_empty' => 0, 'parent' => $cat->term_id, 'taxonomy' => 'product_cat' ) );

                if ( count($subcats) > 0 ):
                    $original_query = $wp_query;

                    foreach ( $subcats as $subcat ):
                        set_query_var('category_header_level', 2);
                        set_query_var('category', $subcat);
                        woocommerce_get_template_part( 'archive-product-child-category', 'loop' ); 
                    endforeach;
                    $wp_query = null;
                    $wp_query = $original_query;
                    wp_reset_postdata(); 
                endif;
                else:
                /*  $args = array( 'post_type' => 'product', 'posts_per_page' => -1, 'product_cat' => $cat->slug );
                    $wp_query = new WP_Query( $args );
                    ?>
                    <?php
                    /**
                    * woocommerce_pagination hook
                    *
                    * @hooked woocommerce_pagination - 10
                    * @hooked woocommerce_result_count - 20
                    * @hooked woocommerce_catalog_ordering - 30
                    */
                /*  do_action( 'woocommerce_before_shop_loop' );
                    ?>

                    <?php woocommerce_product_loop_start(); ?>

                    <?php woocommerce_product_subcategories(); $woocommerce_loop['loop'] = 0; $woocommerce_loop['columns'] = 0; ?>

                    <?php while ( have_posts() ) : the_post(); ?>

                        <?php woocommerce_get_template_part( 'content', 'product' ); ?>

                    <?php endwhile; // end of the loop. ?>
                    <?php */

                endif;
        endforeach;
        $wp_query = null;
        $wp_query = $original_query;
        wp_reset_postdata();
        ?>  
        <?php woocommerce_product_loop_end(); ?>

        <?php do_action('woocommerce_after_shop_loop'); ?>

    <?php else : ?>

        <?php if ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>
            <div class="clear"></div>
            <p><?php _e( 'No products found which match your selection.', 'woocommerce' ); ?></p>

        <?php endif; ?>

    <?php endif; ?>


    <div class="clear"></div>

    <?php
        /**
         * woocommerce_pagination hook
         *
         * @hooked woocommerce_pagination - 10
         * @hooked woocommerce_catalog_ordering - 20
         */
        do_action( 'woocommerce_pagination' );
    ?>

<?php
    /**
     * woocommerce_after_main_content hook
     *
     * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
     */
    do_action('woocommerce_after_main_content');
?>

<?php
    /**
     * woocommerce_sidebar hook
     *
     * @hooked woocommerce_get_sidebar - 10
     */
    do_action('woocommerce_sidebar');
?>

and add a template part ( extended_product_arcive_page_template.php ) to handle the hierarchy.I have done it for a client .Try to achieve this and if you can not contact me again .

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply