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.

Published by Justin Stern

Justin is one of our co-founders, and is our resident overengineer. He likes to write developer tutorials and make black magic happen in our plugins. He thinks that writing code is a lot easier than writing words.

18 Comments

  1. 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

    • 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

  2. 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.

    • 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?

  3. 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?

  4. 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

  5. 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;?>

  6. Above missing line…..

    ** **

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

  7. 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,

  8. 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!

    • 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 WooCommerce support ticket:

      h2.wc-nested-category-layout-category-title {
           padding-top:18px;
           border-top:1px solid #c7c7c7;
      }
      
      • 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.

        • 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).

  9. Is there anyway to implement this on to the home page of my website instead of the “Shop” or “Category” pages?

  10. Hi. I purchased and installed your plugin, but after doing so, my sidebar on my products page (which contains various filters) disappeared. Can this plugin still work with other filters, and if so, how do I get those back?

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.