WooCommerce: How To Display Categories on Any Page

Categorizing products is a great a way to de-clutter your WooCommerce shop and intuitively guide users to the page they are looking for. In WooCommerce you can easily group your similar products under a category, making it easy for users to scan and find the products.

For Example, if you sell T-shirts, Shirts, Pants, and Sunglasses you can easily categorize T-shirts, Shirts, and Pants under “Clothing” category and Sunglasses under “Accessories”.

In WooCommerce shop or archive pages you can display only products, only categories or both products and categories together. In this article we will see how to create WooCommerce categories and display them on shop or archive pages.

Creating Product Categories in WooCommerce

How to Add Product Categories in WooCommerce

Adding a category in WooCommerce is very simple. Within a few clicks you can create a category and assign products to that particular category. Follow these steps to create WooCommerce category:

  • Go to Dashboard > Products > Categories
  • On the left pane, you will find these fields (Name, Slug, Parent, Description, Display type & Thumbnail)
    • Name: Your product category name (e.g. Shoes)
    • Slug: determines the URL (e.g. if you write shoes it will translate into www.yoursite.com/product-category/shoes)
    • Parent: If this category is the parent category or does it falls under another category
    • Description: Detailed category info.
    • Display Type: Determines when visitors lands on the category page what (products, subcategories or both) they will see.
    • Thumbnail: Image of the product category
  • After filling out all the category information, click on Add New Product Category button.

How to Add Subcategories in WooCommerce

Depending on your need you can nest one product category under another in WooCommerce. Simply put, you can create a category and assign it as the parent or subcategory of another category. For example, Shoes can be the parent category and Nike Shoes can be the subcategory of the category Shoes.

  1. Go to Dashboard > Products > Categories
  2. On the right pane, you will find the list of all categories
  3. Click on any category you want to edit and it will take you to Edit Product Category page
  4. Select the parent category of this category from Parent category drop-down
  5. Click on Update to save your changes.

How to Upload Category Image in WooCommerce

You can upload category banner image or category thumbnail in WooCommerce. If your WordPress theme is WooCommerce compatible it will display this category image on the product category page. Follow these steps to upload category image:

  1. Go to Dashboard > Products > Categories
  2. On the right pane, you will find the list of all categories
  3. Click on any category you want to edit and it will take you to Edit Product Category page
  4. Scroll down to Thumbnail and click on Upload/Add Image to upload your category image.
  5. Click on Update to save your changes.

How To Re-order WooCommerce Product Categories

Products categories are ordered based on the order each product category was created. But you can easily change the order of how it will be ordered on the frontend (Shop Page, Sidebar Widgets or anywhere you want to display using shortcodes). Just follow thesesteps to re-order the categories.

  1. Go to Dashboard > Products > Categories
  2. On the right pane, you will find the list of all categories
  3. Click on the = icon on the end of the category and drag them to sort them.
Change Product Category Order

Displaying WooCommerce Product Categories

Show Product Categories on Homepage

If your theme is WooCommerce compatible and has a homepage template that has WooCommerce sections, then you will be able to display product categories on Homepage. Otherwise you will have to display product categories using WooCommerce category shortcodes.

Show Product Categories on Shop Page

On the shop page you can display only categories, categories with products or only products. If you want to display product categories on your Shop page instead of just products, follow these steps:

  1. Click on Appearance > Customize
  2. Then go to WooCommerce > Product Catalog
  3. Select “Show categories” from Shop Page Display
  4. Click on Save Changes

Show WooCommerce Sub Categories on Shop Page

Categories – Subcategories – Products. If you want your shop page to display in that order. Follow these steps:

  1. Click on Appearance > Customize
  2. Then go to WooCommerce > Product Catalog
  3. Select “show subcategories” from Category Display
  4. Click on Save Changes


Show Product Categories on any Page

 You can display product categories on any page using the following shortcodes supplied with WooCommerce.

  • [product_category] – Display all the products of a certain category
  • [product_categories] – Display all product categories

Let’s see how to display WooCommerce product categories on a page.

  1. Go to Dashboard -> Pages and select any page
  2. Write the shortcode [product_categories] to display all categories
  3. If you want to more control, you can use below parameters to modify what you want to display.example:[product_categories parent="0"]
  4. Click on Publish after making the changes.

Product Category Shortcode parameters:

ParameterAccepted ValueDescription
number12Number of categories you want to display
orderbyID | title | nameOrder the product by
orderASC, DESCDetermines the order of the categories, whether ascending or descending.
columns3Number of columns
hide_empty0 | 11 to hide category which don’t have any products listed under them.
parent0 | 10 to display only the parent categories and 1 to display all categories (with sub-categories)
ids12comma separated list of category IDs

For example, you may want to show a list of “Related Categories” on the Single Product page:

Show Product Categories on Sidebar

If you want to display WooCommerce product categories on page sidebar, follow these steps:

  1. Go to Appearance > Widgets
  2. Find the widget called “WooCommerce Product Categories
  3. Drag to your desired sidebar.

Show WooCommerce Product Category in a Menu

  1. Go to Appearance -> Menus
  2. Click on Screen Options from top left and check Product Categories
  3. Now on the left pane a Product Categories tab will show up.
  4. Click on Product Categories tab to expand, select the categories
  5. Click on Save menu

Customizing Product Category Template

One of the true wonders of WooCommerce is its flexibility. WooCommerce has lots of hooks (Action Hooks & Filter Hooks) in source code that let developers easily modify the code.  For example here is a list of hooks that will let you modify the product category layout.

Action Hook – woocommerce_before_subcategory
Action Hook – woocommerce_before_subcategory_title
Action Hook – woocommerce_shop_loop_subcategory_title
Action Hook – woocommerce_after_subcategory_title
Action Hook – woocommerce_after_subcategory
Filter Hook – woocommerce_subcategory_count_html

Hide Product Category Title

If you want to hide the product category title, just insert this in your theme-s functions.php

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

Hide Product Category Count

For example, If you don’t want display the product category count on the shop page, just insert this snippet. Insert this code in your child theme’s functions.php file

add_filter( 'woocommerce_subcategory_count_html', '__return_null' );

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Add Second Description @ Product Category Pages
    In terms of SEO, if you’re trying to rank your product category pages, you really need to make the most of the default WooCommerce product category “description” and “thumbnail”. Most themes, if compatible with WooCommerce, will show this content right below the product category name and above products. Nothing new so far. But what if […]
  • WooCommerce: Show Category For Each Product @ Shop Page
    A client of mine has a category called “Brand”. Each product is assigned to a specific Brand subcategory e.g. Nike, Adidas, etc. The goal of this task was to show the “Brand” subcategories in the shop/category/loop pages as a way to help the user identify the brand name. The same can be applied to showing […]
  • WooCommerce: Change Product Permalinks @ Shop / Loop Pages
    A BloomerArmada fan asked me a very interesting question: how can I link each product in the shop page to its own custom landing page as opposed to the default permalink? Of course this applies when you don’t want to use the default single product page for all or some products. Clearly, you could set […]
  • WooCommerce: Product Category Filter @ Shop Page
    There is already a widget that allows you to place a “Product Category Dropdown” in your sidebar areas. The problem is that lately, sidebars have become kinda 1990. So, what if you want to place a “Category Select Box” anywhere in your WooCommerce website, and (in this case study), exactly on the Product Category pages, […]
  • WooCommerce: Hide Categories From Product Cat Widget
    A client asked me to customize the Product Categories Widget that comes included with WooCommerce. In this case, they wanted to show ALL categories but the current one (when looking at a category page of course). You can also use this tutorial to hide certain category IDs from the widget, or maybe “all product category […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

25 thoughts on “WooCommerce: How To Display Categories on Any Page

  1. Hi Rodolfo,
    thanks for sharing this article.
    I also have a question regarding WordPress and WooCommerce 😉
    Is it possible to display the product category and the products by extracting the category (and the subcategory) from the URL?

    1. Angela, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. How do you display an individual category or sub instead of all categories?

    1. You mean the actual category thumbnail, or the list of products belonging to a given category?

  3. I spent ages messing around with WooCommerce template files via FTP and had no idea this was a thing. Facepalm!

  4. How I can show each category and then the products within each category on the shop page?

    shirt1, shirt2, shirt3, shirt4
    shirt5, shirt6
    hat1, hat2, hat3, hat4

  5. Hello

    I have a wordpress website with woocommerce. I am just wondering in my menu that you click on to drop down different categories, I have one that says Kits and Patterns (as well the other options) and when you click on that it shows a drop down that has pdf patterns, cross stitch patterns, embroidery etc.

    What I want to know is when I actually click on Kits and Patterns how do I get it to go to a page with all the products presented that are also in the drop-down menu in case (or even not be able to be clicked on) in case I have a customer that will just click on Kits and Patterns and not go down to the drop-down options.

    Thanks Selena

    1. Hello Selena, I guess if you now go to “Kits and Patterns” you only see subcategories and not all products? Is this the issue?

  6. Hello, I have a shop an the page “shop”(tienda) display a bar where the user can change the sorting order

    But then I have several pages with the different categories and I don’t have this bar to change the order. I have been researching a lot but most what I find is “how to hide the bar”

    Can you please help me with this?
    Thank you very much!

    1. Hello David, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  7. Show Product Categories on any Page
    Is there a way where I can display a specific category or sub-category instead of all categories?

    1. Yes, the product_categories shortcode accepts an “ids” parameter, and you can specify category ids

  8. Hi,
    Have installed brand as part of WooCommerce. When I run Screaming Frog I am getting not nice urls I cannot control. Usually with Math Rank, WP permalinksettings, or theme (Rehub) one is able to write how one wants the url to look and check for indexing or not. Do you have any tips for how to change and control the last part of brand url after brand name (storecategory)?

    1. Hi Yvette, please contact the brand plugin support

  9. Do you have any advice on how to show a very extensive list of categories? Maybe some good examples?

  10. Hello,I want to show sub category as a dropdown like when you click on parent category then it will show sub category otherwise it will get hidden and only parent categories are shown own shop page.

  11. Hello,

    I have a problem with how products categories are displayed. I would like them to be displayed in grid but instead there are displayed in list. ¿Is there a way to customize how there are displayed?

    Best regards,

    1. Hi Laurie, are you using a shortcode or some code?

  12. I can drag the category to move it but want it on the next page. How do I move to the next page

    1. Hi Vivien! From the top right you should be able to change the number of categories shown per page, so if you increase that number you should be able to achieve that

  13. The info shown above on row count to show on a page no longer appears in the section shown in this tutorial. A!so I found a problem recently that the SHOP page would only show three of the five parent categories but the SHOP menu correctly showed all five. There is a disconnect between the menu logic and the information displayed on the SHOP page. Nothing in forum or in WooCommerce docs to explain how to fix

Questions? Feedback? Customization? Leave your comment now!

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *