Blog

How to Display WooCommerce Products by Subcategory

I recently released a WooCommerce plugin that allows you to organize your products by subcategory in your shop and catalog pages. This extension grew out of a client’s request to alter the standard WooCommerce catalog page layout to show nested child categories on his catalog pages, along with any products that belong to those categories; this is in contrast to the standard catalog pages which simply display all products assigned to the current and any child categories. Although the plugin admittedly has a few limitations and caveats, I am nonetheless quite pleased with the final result, and I hope others find it useful as well.

What it does

What the plugin does is to take the default WooCommerce catalog pages, which display a paginated list of all products, like so:

Catalog Page Before

And breaks the products up by child or subcategory giving us for instance:

Category Layout – After

As you can see in this example, we take the somewhat cluttered video games page, and organize the products by subcategory, here games for girls, and sports games. This creates a more intuitive, attractive, and organized shop layout that I believe customers will appreciate. To see a fully working demonstration, feel free to visit the WooCommerce Nested Category Layout Demo Shop.

Configuration

After installing and activating the plugin, you must visit the WooCommerce > Settings > Catalog settings to select the categories that you want modified by the plugin. You can also set the number of products per subcategory that you want displayed:

Implementation Discussion

For those curious about the implementation of this plugin, the basic strategy used is as follows: when a shop or product category page is loaded, first all products within the current current category, or any child categories, are loaded. This is done so that any product filters (for instance, by price) remain functional, and to keep the main page query simple and keep the overall modifications to a minimum. A custom Walker Class is used to build the data structure of products appearing only in their deepest categories. Then an (overrideable) modified product archive template is used to display any products that are only within the current category, and finally render any child categories that contain products. A maximum number of products per child category can be configured, any more and a “See More” link will be added to bring you to that category.

All custom templates are overrideable in your theme, and all template functions can similarly be replaced and overridden as needed. Despite the substantial change in functionality, the plugin is designed to alter as little as possible, making it hopefully likely to work out of the box with a given theme, or at least possible to add support when needed.

Caveats and Drawbacks

Performance

Because the product archive page query is modified to return all products within the current and all child categories, categories with a large number of products can cause out of memory issues. On my development machine with a 64MB memory limit, this happened at around 125 products per page. With a 128MB limit, at least 200 products were possible; so that’s something to consider. There is also a cache option that can be disabled that should further increase the number of products allowed, but it’s not something I’ve experimented with much.

Theme Support

Despite my every effort to avoid conflicts and minimize the number of template files and functions modified, there may be some themes or frameworks that require additional work for compatibility. Currently the Genesis framework is supported.

Thanks

Thanks for considering my plugin, if you have any questions don’t hesitate to leave a comment below, or get in touch.

15 Comments

  • Bastien 3 months ago Reply

    Hi Justin,

    I am very interested in your plugin. But I want to be able to resize in the theme the products a of category. For example for category 1, product with will be 250px, and for category 2, product width will be 150px.

    Will it be possible with your plugin ? For example, by using a class for each category ?

    thanks for answer

    • justin 3 months ago Reply

      Thanks for the question Bastien. If you take a look at the source for the demo page you can see that the category elements can be selected by their depth (ie product-category-level-2). I don’t have a way of selecting by say category id or slug, but I suppose that could be added easily enough if people needed. Thanks again

  • Michael 3 months ago Reply

    I was wondering if your plugin can work with our theme? Also when you click on accessories in the Shop by category section on the right , we would like to generate a page that displays all the subcategories first instead of all the accessories.

    • justin 3 months ago Reply

      Hey Michael, unfortunately it’s fairly tricky to tell whether the Nested Category Layout plugin works with a given theme aside from just trying it out. The last couple versions of the plugin I have released have been mainly geared towards increasing theme compatibility and I think it’s in pretty good shape at this point, seems to be compatible with most themes unless the theme is doing something really weird, which does happen. And while I can’t necessarily offer support to make the plugin compatible with any 3rd party theme, if the plugin is demonstrated to not be compatible I do offer a full refund.

      Regarding your second question, is that different from how WooCommerce normally displays the category/shop pages with all the categories listed first, followed by the products?

  • Kirk 2 months ago Reply

    Hello Justin,
    Thanks for such a fantastic plugin! This is just what the doctor ordered! However, I can’t seem to find the plugin to download it. I’ve searched and searched but seem to be unsuccessful. Is it still available?

    • Justin Stern 2 months ago Reply

      Hey Kirk, thanks for pointing that out, I had no idea the product link was broken! I’ve fixed it, though here it is for your convenience: http://www.skyverge.com/product/woocommerce-nested-category-layout/

      As a thank-you for pointing this out I’ve sent you coupon in case you decide to give the plugin a try. Thanks again!

  • Emma 2 months ago Reply

    doesnt work well with woothemes and too many conflicts with other woo plugins. Killed the performance of my website. Great idea but needs more work

  • Ajaypal Bhoreriya 1 month ago Reply

    Hi mate,

    I have a solution of wordpress woocommerce hierarchy category list:-

    0, ‘orderby’ => ‘ASC’, ‘parent’ =>0)); //, ‘exclude’ => ‘17,77’
    foreach($wcatTerms as $wcatTerm) :
    $wthumbnail_id = get_woocommerce_term_meta( $wcatTerm->term_id, ‘thumbnail_id’, true );
    $wimage = wp_get_attachment_url( $wthumbnail_id );
    ?>

    <a href="slug, $wcatTerm->taxonomy ); ?>”>name; ?>

    1,
    ‘show_option_none’ => ”,
    ‘hide_empty’ => 0,
    ‘parent’ => $wcatTerm->term_id,
    ‘taxonomy’ => ‘product_cat’
    );
    $wsubcats = get_categories($wsubargs);
    foreach ($wsubcats as $wsc):
    ?>
    <a href="slug, $wsc->taxonomy );?>”>name;?>

  • Ajaypal Bhoreriya 1 month ago Reply

    Above missing line…..

    ** **

    Complete Line
    0, ‘orderby’ => ‘ASC’, ‘parent’ =>0)); //, ‘exclude’ => ‘17,77’

  • Simon 9 weeks ago Reply

    Hello,

    Is it possible to display full sized images rather than the thumbnail image?

    I’ve been trying to achieve this for a while now but to no avail.

    Thanks,

    • Beka Rice 7 weeks ago Reply

      Hey Simon, you could do this by overriding the shop archive template to change which image is used.

  • Stig 3 weeks ago Reply

    Hello!

    I bought your plugin. It’s awesome.

    I want to make two slight changes to my product archive layout (using your plugin):

    1) Add some extra space between each cathegory (one or two lines).

    2) Add a light grey line between each cathegory to get better product overview.

    How can I do that?

    Thank you!

    • Beka Rice 3 weeks ago Reply

      Hey there, you’d need to add CSS to your child theme stylesheet or custom CSS area, but this may be affected by your theme. Something like this should get you started, or we’d be happy to help via WooThemes support ticket:

      h2.wc-nested-category-layout-category-title {
           padding-top:18px;
           border-top:1px solid #c7c7c7;
      }
      
      • Stig 3 weeks ago Reply

        Thank you so much Beka! It worked!

        Is it possible to add it above all cathegories (like it is now) except above the first cathegory? Since now I get two grey lines above the first cathegory. The theme itself places a grey line just beneath the title displayed on top of the page.

        Thanks again.

        • Beka Rice 3 weeks ago Reply

          Hey Stig, This would be something you’d have to change in the theme to remove the grey line instead I’m afraid, as the above styling will be applied to all nested category layout categories (there’s no way to target the first one).

Submit a Comment