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:
And breaks the products up by child or subcategory giving us for instance:
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.
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:
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
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.
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 for considering my plugin, if you have any questions don’t hesitate to leave a comment below, or get in touch.