Flash sale: Get up to 30% off themes and extensions. Ends April 26 at 3 pm UTC. Shop the sale.
  1. Documentation /
  2. WooCommerce Nested Category Layout

WooCommerce Nested Category Layout

Overview

↑ Back to top
WooCommerce Nested Category Layout alters catalog and/or shop layouts to show products in their respective categories or subcategories. WooCommerce will allow you to display categories, but requires the user to click through categories and subcategories to find products. This plugin provides an intuitive layout that makes it easy for customers to find relevant products, since categories and subcategories are shown with products below them, allowing customers to view products without clicking through several screens.
View the frontend modifications made by the plugin in the WooCommerce Nested Category Layout Demo Shop.

Installation

↑ Back to top
  1. Download the extension from your WooCommerce dashboard
  2. Go to Plugins > Add New > Upload and select the ZIP file you just downloaded
  3. Click Install Now, and then Activate
  4. Go to WooCommerce > Settings > Products and read the next section to learn how to setup and configure the plugin.

Disclaimers

↑ Back to top
Due to implementation constraints, this plugin may cause out-of-memory errors if enabled on category pages with many (hundreds) of products, depending on your particular hardware and server configuration.

Setup and Configuration

↑ Back to top
First, products must be categorized into categories and subcategories if relevant. Many shops do this already, but without categories for products, this plugin will not work as expected. WooCommerce typically displays all products on the shop page without categorization. This plugin will change that flow to make your store easier for users to navigate. Once your categories are set up, go to WooCommerce > Settings > Products and scroll down to “Catalog Pages by Category”: WooCommerce Nested Category Layout Settings First, select how many products you want to display in the subcategory. If the subcategory contains more products than you choose to display, a “See More” link will be displayed after the products so that users can view the rest. Next, select which pages should show the nested layout. If “Shop Page” is enabled, the nested layout will be displayed on the base shop page. If a category name is enabled, then the nested layout will be used on the category page as well.

How are Categories Displayed?

↑ Back to top
There are a few ways you can categorize products, so here are some helpful hints into how Nested Category Layout will display them:
  • No Category – If a product is not categorized, it will be displayed first on the shop page (with other products that lack a category), then products with categories / subcategories will be displayed after it.
  • One Product in Category – If only one product is present in the category, it will be displayed first on the shop page (with the products that lack a category), then products with categories / subcategories will be displayed after it.
  • Only in Parent Category – If a product belongs to a parent category but not to a subcategory, then the product will be displayed under the parent category name. Any products in this category that also belong to subcategories will be displayed after it with the appropriate subcategory. Here’s an example using the “Home” category with a couple of subcategories: WooCommerce Nested Category Page
  • In a Subcategory – If a product belongs to a subcategory (even if it also belongs to a parent category), then it will be displayed with that subcategory in the nested list. In the image above, take the “Pilsner Glasses” for example. These glasses belong to both “Home” and the Home subcategory, “Drinkware”. They are displayed under “Drinkware” since they belong to a subcategory. All products only under “Home” do not belong to any subcategory.
Note that subcategory names become links to the subcategory page so that customers can easily drill down the catalog to find what they need. This is true of category names on the Shop page as well.

Frequently Asked Questions

↑ Back to top
Q: What happens if a subcategory has its own sub-subcategory? (Now we’re going down a rabbit hole!) A: This plugin supports multiple nested categories. Let’s use the examples above and say I have a “Home” parent category with a “Drinkware” subcategory. What if the “Drinkware” subcategory has its own subcategories – say “Mugs” and “Glassware”? These will be used for the shop and category / subcategory pages as well. Instead of just showing “Drinkware”, it will break this subcategory apart into “Drinkware – Mugs” and “Drinkware – Glasses” as shown below: WooCommerce Nested Category Layout Multiple Nested Categories
Q: Can I change the order that the categories or subcategories display in? A: Yes! This is actually a core feature of WooCommerce. If you go to Products > Categories to view your category list, you can actually drag and drop all categories and subcategories into the order that you choose. Hover your mouse over the row for the category you’d like move, then drag and drop it into the order that you’d like. The plugin will use this order to sort your categories and subcategories on your shop and archive pages.
Q: Can I remove the category name from the nested layout? For example, if “Game” is the parent category and it two sub-categories of “Action” and “Sport”, nested sections should be named “Action” and “Sport”, not “Games – Action” and “Games – Sport”. A: Yep, this is certainly possible. While we don’t support customizations and these won’t be included via our support tickets, here’s a snippet that will remove the category title, and can get you started on further customizations.
<?php
add_filter( 'wc_nested_category_layout_category_title_html', 'wc_nested_category_layout_category_title_html', 10, 3 );
function wc_nested_category_layout_category_title_html( $title, $categories, $term ) {
$category = $categories[ count( $categories ) – 1 ];
$url = esc_attr( get_term_link( $category ) );
$link = '<a href="' . $url . '">' . wptexturize( $category->name ) . '</a>';
return sprintf( '<h2 class="wc-nested-category-layout-category-title">%s</h2>', $link );
}
view raw wc-nested-category-layout-category-title-remove-parent.php hosted with ❤ by GitHub

Questions & Support

↑ Back to top
Have a question before you buy? Please fill out this pre-sales form. Already purchased and need some assistance? Get in touch with support via the help desk.