How to Display Categories and Subcategories in WooCommerce: Complete Guide

If you’ve ever browsed through Nike’s website, you’ve probably noticed how easy it is to find exactly what you’re looking for. 

Whether you’re after “Running Shoes,” “Basketball Shoes,” or “Casual Shoes,” everything is neatly organized into categories and subcategories. This isn’t just a nice-to-have—it’s essential for making sure customers find what they need quickly.

Running a WooCommerce store isn’t much different. Organizing your products into categories and subcategories can make your site easier to navigate and boost your visibility in search engines. When you display categories and subcategories in WooCommerce, you’re setting your store up for success. Customers find what they want faster, and search engines know exactly where to direct traffic.

In this guide, I’ll show you how to set up your WooCommerce product categories so your store runs as smoothly as Nike’s.

Want to keep things simple?

We’ll handle the setup so you don’t have to. Just book a free consultation with our WooCommerce customisation experts, and we’ll take care of the rest.

Table of Contents

• Different Methods to Display Categories and Subcategories in WooCommerce
• Displaying Categories and Subcategories on the Shop Page
  • Steps to Display Categories and Subcategories Using the Customizer
  • Displaying Categories and Subcategories on the Shop Page Using Code
• Displaying Categories and Subcategories Using Shortcodes
• Displaying Product Categories and Subcategories Separately
• Wrapping Up

Different Methods to Display Categories and Subcategories in WooCommerce

When it comes to displaying categories and subcategories in your WooCommerce store, you have a few different options to choose from. Each method offers a unique way to organize and present your products, depending on how you want your customers to navigate your site.

1. On the Shop Page: This method allows you to display categories and subcategories directly on your main shop page. It’s a great way to give customers an overview of your product offerings as soon as they land on your store.
   
2. Using Shortcodes: Shortcodes are a flexible option that lets you show categories and subcategories anywhere on your site, whether it’s on a specific page, post, or even within widgets. This method is ideal if you want more control over where and how your categories appear.
   
3. Separately Displaying Categories and Subcategories: If you want to keep your main categories and their subcategories on separate pages, this method is for you. It’s particularly useful for stores with a large product range, where separating categories can help improve navigation and customer experience.

In the following sections, we’ll cover each of these methods step by step, so you can choose the one that best fits your store’s needs.

Displaying Categories and Subcategories on the Shop Page

One of the simplest and most effective ways to showcase your product categories and subcategories is directly on your WooCommerce shop page. This method ensures that customers can easily navigate through your offerings right from the start.

In this section, we’ll cover two methods to achieve this:

1. Using the Customizer: This approach allows you to configure your shop page display options directly through the WordPress Customizer. It’s user-friendly and doesn’t require any coding knowledge, making it a great choice for store owners who prefer a straightforward setup.
   
2. Using Custom Code: For those who want more control and customization, we’ll also show you how to display categories and subcategories on the shop page by adding a custom code snippet to your theme’s functions.php file. This method provides more flexibility in tailoring the layout to fit your specific needs.

Steps to Display Categories and Subcategories Using the Customizer

1. Find the Customizer
   • Begin by navigating to your WordPress dashboard.
   • Go to Appearance → Customize.

2. Select WooCommerce Options
   • In the customizer, find and select WooCommerce.
   • Then, choose Product Catalog.

3. Choose Category Display Options
   • Under the Shop Page Display section, you’ll see options for how your products and categories are shown.
   • You can choose to either “Show Categories” or “Show Categories and Products,” depending on how you want the layout to appear.

4. Save and Publish
   • Once you’ve made your selection, click Publish to save your changes.

Displaying Categories and Subcategories on the Shop Page Using Code

Think about the last time you browsed Nike’s website. The way their categories are arranged—like “Running Shoes” and “Basketball Shoes”—gives you a sense of control. You know exactly where to go to find what you need. 

Now, imagine having that same level of control over your WooCommerce store. By adding a simple code snippet to your functions.php file, you can ensure your categories and subcategories are displayed exactly how you want them on your shop page.

Steps to Display Categories Using Code:

1. Navigate to the functions.php File
   • Start by locating the functions.php file in your active theme’s folder.
   • You can find this file in the path: \wp-content\themes\your-active-theme.
   • For example, if your active theme is “Twenty Twenty-Four,” the path will be: \app\public\wp-content\themes\twentytwentyfour.
     
2. Add the Code Snippet
   • Open the functions.php file and paste the following code snippet:

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

function display_subcategories() {
    if (is_shop()) {
        echo do_shortcode('[product_categories number="2" parent="0"]');
    }
}

3. Save the File and Check Your Shop Page
   • After adding the code, save the functions.php file.

Head over to your shop page to see your categories displayed before the product listings, just like how Nike neatly organizes its products for easy navigation.

Code Explanation:

• Hook (woocommerce_before_shop_loop): This hook triggers the function right before the product listings on the shop page, just like how Nike ensures categories are upfront for quick access.
  
• Function (display_subcategories): This function checks if the current page is your shop page. If it is, it uses the [product_categories] shortcode to display categories.
  
• Shortcode Details:
  • number=”2″ specifies that only 2 categories will be displayed, giving you control over what’s shown.
    
  • parent=”0″ ensures that only top-level categories (those without a parent) are displayed, similar to how Nike would showcase main categories like “Running Shoes.”

This approach gives you the power to tailor your WooCommerce shop page just like Nike, ensuring your customers find what they’re looking for with minimal effort.

Displaying Categories and Subcategories Using Shortcodes

Shortcodes are a powerful tool in WooCommerce, giving you the flexibility to display categories and subcategories anywhere on your website, whether it’s on a page, a post, or even in a widget. 

This method is perfect for when you want specific control over where your product categories appear.

Steps to Display Categories Using Shortcodes:

1. Create a New Page or Post
   • Start by navigating to your WordPress dashboard.
   • Go to Pages → Add New or Posts → Add New.

2. Add the Shortcode
   • In the content editor, add the following shortcode to display your categories and subcategories:
     [product_categories]

3. Customize the Shortcode
   • If you want to display specific categories or subcategories, you can modify the shortcode by specifying the category IDs. For example:
     [product_categories number=”5″ ids=”15, 23, 34″]

This example will display categories with the IDs 15, 23, and 34. It’s similar to how Nike might showcase specific collections in different sections of their site.

4. Publish the Page or Post
   • Once you’ve added and customized your shortcode, click Publish to make your changes live.

This method allows you to display WooCommerce product categories exactly where you want them on your site, giving you the flexibility to create a more tailored and organized shopping experience for your customers. 

Displaying Product Categories and Subcategories Separately

In WooCommerce, product subcategories, such as different “Brands,” are often displayed under their main category, like “Mobile Phones.” However, if you want to display the main category and its subcategories on separate pages, you can do this by following a few simple steps. 

Steps to Display Categories and Subcategories Separately

1. Create a Page for the Main Category
   • Navigate to your WordPress dashboard.

• Go to Pages → Add New Page.
• Title this page according to the primary category you want to display, such as “Mobile Phones.”

In the content section, use the following shortcode to show just the “Mobile Phones” category:

[product_categories ids=”AB”]

• Replace “AB” with the actual category ID for “Mobile Phones.”

• How to Find the Category ID:
  • Go to Products → Categories in your dashboard.
  • Hover your cursor over the name of the category, and look for the ID in the URL. The number after tag_ID is your category ID.

2. Create a Separate Page for Subcategories
   • Create another new page by going to Pages → Add New Page.
   • Title this page something like “Mobile Phone Brands” to indicate that it will display the subcategories of “Mobile Phones.”

Use the following shortcode to display only the subcategories under “Mobile Phones”:

[product_categories parent=”AB”]

• Replace “AB” with the ID of the “Mobile Phones” category. This will display all subcategories (e.g., different brands) under “Mobile Phones.”

3. Link the Pages for Easier Navigation
   • To enhance the user experience, you can link these pages together.
   • On the “Mobile Phones” page, add a link to the “Mobile Phone Brands” page with text like “See All Brands.” This can be done by editing the content field of the “Mobile Phones” page.
   • Similarly, add a link on the “Mobile Phone Brands” page that points back to the “Mobile Phones” page.
     
4. Publish the Pages
   • Once everything is set up, click “Publish” on both pages to make them live on your site.

Wrapping Up

Getting your WooCommerce store organized with clear categories and subcategories makes shopping easier for your customers and helps your site stand out in search engines. Display categories right on your shop page, use shortcodes to place them where they make the most impact, or separate them for a more targeted approach—each method gives you control over how your products are presented. By following these steps, you’re setting up a shopping experience that’s as smooth and user-friendly as browsing through Nike’s site.

Need a hand with setting this up?

Let’s make your WooCommerce store work better for you. Reach out for a free consultation with our WooCommerce customisation experts, and we’ll get your store running like seamlessly in no time.