How to Display WooCommerce Categories & Subcategories for Better Store Navigation

Ever walked into a messy store where nothing is where you expect it to be? Frustrating, right? The same goes for an online shop. If your products aren’t well-organized, customers will leave before they even find what they need.

WooCommerce lets you sort products into categories and subcategories, but actually displaying them in a user-friendly way isn’t always straightforward. That’s what this guide is here for.

I’ll take you through the exact steps to neatly display categories in WooCommerce so your store is easy to navigate, and customers can shop without hassle.

Let’s jump in!

 

Understanding WooCommerce Categories and Subcategories

WooCommerce Product categories are broad groupings of products based on their shared characteristics or features. For example, if you run an apparel store, your product categories might include Men’s, Women’s, and Children’s wear.

Each product category can contain multiple subcategories, which are more specific groupings of products within a category.

For example, within the Women’s clothing category, you might have Tops, Bottoms, Dresses, and Accessories subcategories.

Using categories and subcategories in WooCommerce creates a more organized and user-friendly store that makes it easier for customers to find and purchase the products they want.

Why Should You Display Product Categories in WooCommerce?

Displaying product categories in WooCommerce is important for several reasons:

• Easier Navigation: Categories help customers quickly find what they’re looking for, avoiding the hassle of scrolling through endless products.

• Better Organization: Grouping products into categories keeps your store tidy and user-friendly, improving the shopping experience.

• SEO Benefits: Using relevant category names can boost your store’s visibility in search engines, attracting more organic traffic.

• Targeted Marketing: Categories allow you to highlight specific products, making it easier to promote sales or seasonal items.

• Faster Purchases: Clear categories help customers make quicker decisions, potentially increasing sales.

Smooth Category Navigation = Happier Shoppers

Our optimized stack ensures:
✓ <1s category page loads (NVMe + Redis caching)
✓ Dynamic category updates without performance drops
✓ SEO-friendly URLs for better product discovery

Boost Performance →

Setting Up Product Categories in WooCommerce

Before we go ahead and check out how to display categories and subcategories on your shop page, let’s first see how to create them.

When setting up your store, you’ll first create Parent Categories to define broad product groups and then add Subcategories to organize items further.

For example, if you’re selling shoes, you might have a parent category called Shoes and subcategories like Running Shoes and Formal Shoes.

You can use managed hosting for WooCommerce from Cloudways for your eCommerce stores.

How to Create a New Product Category in WooCommerce?

1. Go to Your WordPress Dashboard
   • Navigate to Products → Categories in the left-hand menu.

2. Fill in the Category Details
   • Name: Enter a descriptive name for your category. Example: Shoes.
   • Slug (Optional): This is the URL-friendly version of the name. If left blank, WooCommerce will generate one automatically.
   • Parent Category: If this is a main category, leave this blank. If it’s a subcategory, choose a Parent Category from the dropdown.
   • Description (Optional): Write a brief summary of what this category includes.
   • Display Type: Decide how products should appear when customers land on this category page. Options include:
     • Default – Follows your theme’s default layout.
     • Products – Only shows products within this category.
     • Subcategories – Displays subcategories instead of individual products.
     • Both – Shows both products and subcategories.
   • Thumbnail: Upload an image that represents this category. This helps customers visually recognize different product sections.
3. Save Your Category
   • Click Add New Category, and it will appear in the list on the right-hand side.

And your new “Shoes” category is created!

How to Create Subcategories in WooCommerce?

If you need to organize your products into subcategories (for example, under “Shoes,” you want to add “Nike Shoes” or “Adidas Shoes”), follow these steps:

1. Go to Products → Categories in your WordPress dashboard.
2. Add a New Category, just like before.
3. In the Parent Category dropdown, select the main category under which this subcategory should fall.
   • Example: If you’re adding “Nike Shoes,” set Shoes as the Parent Category.
4. Fill in the other details as needed (slug, description, display type, and thumbnail).
5. Click Add New Category, and it will be nested under its parent category.

How to Display Default Category, Subcategory, and Product in WooCommerce?

Okay, so we’ve looked at how to set up categories and subcategories for our store, allowing visitors to either browse products directly from the homepage or narrow down their search by clicking through to a specific product category archive.

But how to display these categories in your store?

There are two main ways to achieve this:

1. Easy Approach: Using WooCommerce’s built-in settings (no coding required).
2. Code Approach: Using custom code for advanced customization.

Let’s explore both approaches step by step.

Easy Approach: Using WooCommerce CMS

By default, WooCommerce doesn’t always display categories, subcategories, and products in the most organized way. If you want a clean structure where categories appear first, followed by subcategories and products, here’s exactly how to do it—without touching any code.

Method 1: Set Up Category Display Using the WordPress Customizer

If you want WooCommerce to handle the layout automatically, the WordPress Customizer is the easiest way to do it. You can control whether your Shop page shows only categories, categories with subcategories, or a mix of everything.

Here’s how to do it:

Head to Appearance → Customize in your WordPress dashboard.

Click on WooCommerce → Product Catalog.

Under Shop Page Display, select Show Categories (if you only want categories) or Show Both (to include products too). I’ll just choose “Show Categories”. And then, under Category Display, I’ll choose Show subcategories & products.

Click Publish, and your Shop page will update instantly.

The Shop page will only show parent categories instead of a messy product list. When a user clicks a category, they’ll see its subcategories and products neatly displayed.

Method 2: Manually Arrange Categories with WooCommerce Shortcodes

If the built-in settings don’t give you the control you need, shortcodes let you manually structure your Shop page as you want. I’ve written a detailed blog post on WooCommerce shortcodes that you should check out if you’re new to them.

Anyhow, you can use these shortcodes:

Show all parent categories:

[product_categories]

Show specific categories (replace IDs with actual category numbers):

[product_categories ids="10,15,22"]

Display products from a specific category:

[products category="your-category-slug"]

To use these shortcodes on your shop page, follow these steps:

• Open Pages → Shop Page in your WordPress dashboard.
• Paste the shortcode where you want categories or products to appear. I’ll use this shortcode as an example: [product_categories]
  

• Click Update, and refresh your site to see the changes.
• The Shop page will now display only the categories.

Clicking a category will show its subcategories and products below it—exactly how an online store should look. For example, I can see that the Bras & Tanks category in my store has a subcategory, Clothing.

So, if I click on it, I’ll see the subcategory and the products. Like so:

Method 3: Use WooCommerce Blocks for a Visual Layout

For those using the Gutenberg Block Editor, WooCommerce provides a drag-and-drop way to arrange categories and subcategories without shortcodes.

Setting Up Categories with WooCommerce Blocks:

Open Pages → Shop Page and click Edit.

Press the + (Add Block) button and search for “Product Categories List”.

Click to insert it, then tweak the settings:

• Under Display Style, choose List (shows all categories stacked) or Dropdown (collapsible menu).

• Enable Show Hierarchy, so subcategories appear under parent categories.

• Adjust any additional display settings based on your preference.

Click Update, and refresh your Shop page.

Your categories will be neatly displayed, with subcategories appearing right below them. Like so:

This way, customers can navigate your store effortlessly, making your store easier to browse.

How to Display WooCommerce Categories & Subcategories in Different Areas of Your Store?

Now let’s check out how to display your WooCommerce categories and subcategories in different areas of your store:

1. Display Categories in the Navigation Menu

Placing categories in your main navigation menu helps customers find what they need quickly.

• Go to Appearance → Menus in the WordPress backend.

• Create a new menu. I’ll name it “New Test Menu”.

• Then, click on Screen Options in the top left corner and select Product Categories.

• On the left pane, a new tab will appear with the title Product Categories. Click on it to expand, select the categories you want, and click Add to Menu.

• Click Save Menu to apply the changes.

Now, your product categories will be displayed in the menu, making it easy for customers to find what they’re looking for.

2. Display Categories in the Sidebar

Adding categories to the sidebar ensures they’re visible from any page, making navigation easier for shoppers.

1. Go to Appearance → Widgets in the WordPress backend.
2. Click the dropdown on the Sidebar.

• Now, add a new block.

• Look for the widget called Product Categories List.

• Customize the settings. I’ll choose the display style to be a dropdown because I find it cleaner.

• Now, when I save and view the changes, my sidebar will appear with all the categories.

3. Display Categories in the Footer

Adding categories to the footer ensures they remain accessible on every page, especially for users who scroll to the bottom.

Here’s how to add categories to the Footer:

• Go to Appearance → Widgets.
• Drag the Product Categories widget into a footer widget area.

• Adjust display settings (e.g., show only parent categories or include subcategories).
• Click Save and this is how your footer would look like.

Code Approach: Using Custom Code

If you want full control over how WooCommerce categories and subcategories appear, custom code is the way to go. You don’t need to rely on plugins or theme settings—just add the right snippets to your site. Here’s how to do it:

Display WooCommerce Product Categories Before Products

By default, WooCommerce doesn’t display product categories before the products. To fix this, I’ll add a function that dynamically fetches and displays categories.

First, I’ll access the functions.php file of the active theme. You can do this through your WordPress dashboard by going to Appearance > Theme Editor or by using an FTP client like FileZilla to navigate to wp-content/themes/your-theme/. Once you’re in functions.php, I’ll add the following code:

function woocommerce_product_category() {

$woocommerce_category_id = get_queried_object_id();

$args = array(

'parent' => $woocommerce_category_id

);

$terms = get_terms('product_cat', $args);

if ($terms) {

echo '<ul class="woocommerce-categories">';

foreach ($terms as $term) {

echo '<li class="woocommerce-product-category-page">';

woocommerce_subcategory_thumbnail($term);

echo '<h2><a href="' . esc_url(get_term_link($term)) . '">' . $term->name . '</a></h2>';

echo '</li>';

}

echo '</ul>';

}

}

add_action('woocommerce_before_shop_loop', 'woocommerce_product_category', 100);

This code grabs the current category being viewed, fetches its subcategories, and lists them before the products appear. WooCommerce has built-in thumbnail support, so the woocommerce_subcategory_thumbnail($term); function will show category images automatically.

Fetch and Display Subcategories for a Specific Category

If I want to display subcategories for a specific category rather than the current one, I can use this code. This is useful when I want to display subcategories for categories like “electronics” or “clothing”:

function woocommerce_get_product_category_of_subcategories($category_slug) {

$taxonomy = 'product_cat';

$parent = get_term_by('slug', $category_slug, $taxonomy);

$children_ids = get_term_children($parent->term_id, $taxonomy);

$terms_html = array();

foreach ($children_ids as $child_id) {

$term = get_term($child_id, $taxonomy);

$term_link = get_term_link($term, $taxonomy);

if (!is_wp_error($term_link)) {

$terms_html[] = '<a href="' . esc_url($term_link) . '" class="' . $term->slug . '">' . $term->name . '</a>';

}

}

return '<span class="subcategories-' . $category_slug . '">' . implode(', ', $terms_html) . '</span>';

}

To display subcategories for the “electronics” category, I’d call it in the relevant template file like this:

echo woocommerce_get_product_category_of_subcategories('electronics');

Show Category Descriptions on Product Pages

WooCommerce doesn’t automatically show category descriptions on product pages. To add this, I’ll modify the functions.php file. I’ll use an FTP client (or the Theme Editor in the WordPress dashboard) to open the file and add this code:

global $post;

$terms = wp_get_post_terms($post->ID, 'product_cat');

if (!empty($terms)) {

foreach ($terms as $term) {

echo '<div class="woocommerce-get-product-category">' . $term->description . '</div>';

}

}

This retrieves the category assigned to the current product and displays its description.

Create a Custom Plugin to Manage Product Categories

Instead of modifying functions.php, I can turn this into a custom plugin. This keeps things modular and ensures the functionality stays even after a theme update.

• I’ll connect to the website via FTP (using FileZilla, for example) and go to wp-content/plugins/.

• Then, I’ll create a folder called cloudways-product-categories-in-archives.
• Inside that folder, I’ll create a file called cloudways-product.php and add the following code:

<?php

/**

* Plugin Name: WooCommerce Product Category

* Description: Displays WooCommerce categories on product pages.

* Version: 1.0

* Author: Your Name

**/

function cloudways_product_subcategories() {

$parentid = get_queried_object_id();

$args = array('parent' => $parentid);

$terms = get_terms('product_cat', $args);

if ($terms) {

echo '<ul class="product-cats">';

foreach ($terms as $term) {

echo '<li class="category">';

woocommerce_subcategory_thumbnail($term);

echo '<h2><a href="' . esc_url(get_term_link($term)) . '">' . $term->name . '</a></h2>';

echo '</li>';

}

echo '</ul>';

}

}

add_action('woocommerce_before_shop_loop', 'cloudways_product_subcategories', 50);

Add Custom Styling for Category Display

Since the categories need some styling, I’ll add a custom CSS file to the plugin.

• Inside the plugin folder (cloudways-product-categories-in-archives), I’ll create a css folder and create a file named style.css inside it.
• I’ll add this CSS code to style the category display:

.product-cats {

display: flex;

flex-wrap: wrap;

list-style: none;

padding: 0;

}

.product-cats .category {

margin: 10px;

text-align: center;

}

.product-cats h2 {

font-size: 16px;

margin-top: 10px;

}

• To ensure the CSS is loaded, I’ll go back to cloudways-product.php and add this function to enqueue the stylesheet:

function cloudways_product_cats_css() {

wp_enqueue_style('cloudways_product_cats_css', plugins_url('css/style.css', FILE));

}

add_action('wp_enqueue_scripts', 'cloudways_product_cats_css');

Now, when I activate this plugin from the WordPress dashboard, it will automatically display product categories before products, complete with thumbnails and links to the category pages.

Other Product Category Actions You May Want for Your WooCommerce Stores

There will be times when you’ll need to hide or sort product categories. Maybe because of an overlap, or maybe because the pictures explain the category, and you don’t need to display the tags.

Whatever the reason, let’s explore some other product category-related actions that you may need for your WooCommerce stores.

How to Hide Product Categories in WooCommerce

You can hide product categories in WooCommerce in two ways:

• Via a plugin
• Via a code

Let’s explore them both.

How to Hide Product Categories in WooCommerce (Via Plugin)

You can use the plugin called Hide Categories and Products for Woocommerce. It’s a paid tool priced at $4.09/month. Once you have the plugin installed, you’ll see it under the WooCommerce option.

You then need to follow the instructions below:

WooCommerce → Products Visibility → Global Visibility

Then, select the categories you want to hide and save the changes. Doing so will help you in hiding the product categories in WooCommerce.

How to Hide Product Categories in WooCommerce (Via Code)

You can use customized codes to hide the product categories. Here’s an example of a code that hides the products using the get_term filter:

add_action( 'woocommerce_before_shop_loop', 'show_product_categories', 20 );

function show_product_categories() {

// Display product categories

echo do_shortcode( '[product_categories]' );

}

You can use other custom methods to get the job done as well. The modifications will depend upon your requirements.

How to Hide Product Category Title in WooCommerce

You can hide the product category title in WooCommerce using the following code:

add_action( 'init', function() {

remove_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title', has_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title' ) );

} );

How to Hide Product Category Count in WooCommerce

You can hide the product category count in WooCommerce using the following shortcode:

add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {

return null;

}, 10, 2 );

How to Sort by Category in WooCommerce

You can sort by category using the following shortcode:

add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {

return null;

}, 10, 2 );

How to Set the WooCommerce Category Image Size

Here’s how you can set the WooCommerce category image size:

• Go to Appearance and click on Customize.

• Click on WooCommerce in the panel and then choose Product Images.

• You’ll see some settings. Choose the one you like or click on customize to set a custom size.

That’s it. Following the simple steps above will help you set the WooCommerce category image size.

Showcase Categories, Boost Sales

Faster category displays reduce bounce rates by 40%*. Cloudways provides:
✓ Auto-scaling for traffic spikes during category launches
✓ Free Cloudflare CDN for global shoppers
✓ Staging to test category layouts risk-free

Optimize My Pages

Best Practices for Organizing Woocommerce Product Categories

Organizing WooCommerce product categories effectively can significantly improve user experience and make store management more efficient. Keep your WooCommerce store organized and efficient with help from business storage solutions. Here are some best practices for organizing your product categories and subcategories:

• Choose category names that are simple, descriptive, and easy to understand.
• Limit the number of main categories.
• Ensure your subcategories are relevant and specific to their main category.
• Ensure you consistently categorize products according to their features and functionalities.
• Optimize category pages
• Regularly review your store’s organization and make adjustments as needed.
• Ensure your store’s design is responsive and mobile-friendly.
• Enable breadcrumbs to help users easily navigate between categories, subcategories, and product pages.

Tips to Optimize WooCommerce Product Categories for SEO

Here are some tips for optimizing your WooCommerce product categories for SEO:

• Conduct keyword research
• Optimize category and subcategory names
• Create SEO-friendly URLs
• Craft unique, keyword-rich descriptions for each category and subcategory
• Use header tags (e.g., H1, H2, H3) to structure your category and subcategory pages.
• Use high-quality images for your categories and subcategories, and optimize them for fast loading.
• Add internal links
• Add schema markup (structured data) to your category and subcategory pages.
• Use SEO plugins, like Yoast SEO or Rank Math, to help you optimize your WooCommerce store.

Common Issues Users Face in Displaying Product Categories and Their Solutions

Users may run into some common issues while displaying the product categories on their WooCommerce stores. This section covers those issues and their solutions.

Problem #1: Categories Not Showing on the Menu

Sometimes you’ve identified the categories, but they don’t appear on the Menu. You can resolve this issue by following these steps:

Solution

Follow the steps below:

• Go to Appearance > Menus in the WordPress dashboard.
• Click on the “Screen Options” tab in the top-right corner and make sure the “Product Categories” checkbox is checked.

• Now, you can see product categories in the left column. Select the categories you want to add to the menu and click “Add to Menu“

• And you’re done.

Problem #2: Category Images Not Displaying

Sometimes you won’t see the category images on your WooCommerce store, but it can be easily fixed.

Solution

Firstly, you must ensure that you have assigned an image to each category. To do that:

• Go to Products > Categories.
• Click “Edit” below the category name.
• Scroll down to the “Thumbnail” section and click “Upload/Add image” to set a category image.

• Save your changes.

Problem #3: Categories Displayed in the Wrong Order

Sometimes you will see that the categories are not displayed in the right order on your WooCommerce store.

Solution

You can manually set the order of your product categories by following the steps below:

• Go to Products > Categories.
• Use the drag-and-drop interface to rearrange the categories as desired.

Problem #4: Displaying Empty Categories

By default, WooCommerce displays all categories, including empty ones.

Solution

To hide empty categories, add the following code snippet to your theme’s functions.php file:

add_filter( 'woocommerce_product_subcategories_args', 'hide_empty_categories' );

function hide_empty_categories( $args ) {

$args['hide_empty'] = 1;

return $args;

}

Problem #5: Category Pages Are Not Indexed by Search Engines

Some users may notice that their WooCommerce category pages are not being indexed by search engines.

Solution

• Ensure your category pages are not set to “noindex” in your SEO plugin settings (such as Yoast SEO or Rank Math).
• Additionally, check the “Search Engine Visibility” setting in Settings > Reading and make sure the “Discourage search engines from indexing this site” option is unchecked.

Summary

Displaying categories and subcategories in your WooCommerce store is essential for providing a clear and organized shopping experience for your customers. By categorizing your products, you make it easier for customers to find what they are looking for and encourage them to explore related products.

In this tutorial, you have figured out how to create a plugin that outputs product categories or subcategories independently from the product listings.

By implementing these methods, you can enhance the usability and functionality of your WooCommerce store, which can lead to increased customer satisfaction and sales.