How to display products by category in WooCommerce

When it comes to ecommerce, customers like to be able to find what they're looking for and make purchases quickly. One effective way to improve navigation and organization is to display products by category on the WooCommerce shop page.

If you're wondering "How do I show my categories on the shop page in WooCommerce"? then you've come to the right place.

The free WooCommerce plugin makes it easy to organize your product catalog by structuring it into categories and subcategories. However, the built-in methods for displaying products by category are less helpful. Luckily, there are plenty of more effective ways to show categories on the WooCommerce shop page which will make it easier for customers to find what they're looking for.

In this article, I'll show you:

• How to create and manage WooCommerce product categories.
• 2 ways to display categories on the shop page in WooCommerce - both using the built-in settings and the WooCommerce Product Table plugin.
• How to add WooCommerce category filters to the shop page with the WooCommerce Product Filters plugin.

Let's get started!

Creating and managing WooCommerce categories

Categories in WordPress group together similar content, like posts, pages, and products. This makes it easier for visitors to navigate your site by searching a particular category.

Better navigation can significantly increase sales for online stores. Studies show that customers are more likely to leave a store without buying if they can't find what they want. That's why it's crucial to display categories on your WooCommerce shop page.

You can see an example of this on Wavelength Electronics' shop page where each category's products are listed in separate tables:

Also, by adding search, sort, and filters to your product catalog, customers can easily find what they want without scrolling through long pages.

How to create product categories in WooCommerce

It's simple to create WooCommerce product categories:

1. Go to Products → Categories in the WordPress admin.
2. Click 'Add New'.
3. Add the category name, description etc. as needed.

Adding subcategories and organizing your product hierarchy

If you have more than a few categories, then you can use WooCommerce subcategories to organize your site even further. Look more closely at the above screenshot, and you'll notice 2 ways to manage subcategories:

• Use the 'Parent category' dropdown on the 'Add new category' form to create subcategories in WooCommerce. For example, if you wanted to create a 'High heels' subcategory then you would choose 'Shoes' as the parent category.
• The category tree on the right shows the current WooCommerce category hierarchy. In the screenshot, you can see a 3-tier category structure. Top level 'Clothing' category has 'Men' and 'Women' subcategories. In addition, the 'Men' category has subcategories such as 'Tops' and 'Bottoms'.

WooCommerce supports an unlimited number of category levels. This means that you can create category structures which are as simple or as complex as you like. I recommend writing a list of your desired categories before you start creating them. Think about the best way to structure them for the most effective category management which will make things easier for customers.

Basic methods for displaying categories on your WooCommerce shop page

How to show categories with WooCommerce's default settings

Used alone without any extra plugins, WooCommerce provides a couple of ways to display categories on the shop page.

Firstly, you can structure the shop page so that it either only shows categories; or lists categories first and all the products underneath:

Find this setting at Appearance → Customize → WooCommerce → Product Catalog → Shop page display.

It's not possible to show subcategories on the shop page. However, you can set it up so that clicking on a category will display the subcategories. Do this using the Category display → Show subcategories setting in the WordPress Customizer:

The product category widget

WooCommerce also provides a basic 'Product categories' widget which links to all your categories:

Add this widget at Appearance → Widgets or in the full site editor, depending on your theme. Please note that this is not a category filter widget - you need the WooCommerce Product Filters plugin for that, which I'll tell you about in a minute. This widget is just a basic list of links to each category archive page.

Using blocks and shortcodes to display categories on any page

Want to show categories away from the shop page? You can do this using either WooCommerce blocks or shortcodes, depending on whether you're using the block editor.

There's a choice of 3 blocks which you can use to display categories on any page:

Product Categories List block

The Product Categories List Gutenberg block creates a basic list of categories. It's similar to the WooCommerce Product Categories widget shown above, but has a few extra settings. You can show or hide the product count, category images, subcategory hierarchy, and empty categories. As with the widget, this looks like a filter but it's not - it's just a list of categories with links to the category archive pages.

Product Category

The Product Category Gutenberg block lists products by category. It's pretty flexible and you can choose which products and subcategories to display, and what product data to show for each product. However, it doesn't change the layout in a way that would improve conversions.

WooCommerce category shortcodes

Sites not using the block editor can use shortcodes instead:

• [product_category category="clothing"] lists products from a specific category.
• [product_categories] lists your WooCommerce categories or subcategories.

These look just like the WooCommerce category blocks, but you add them via a shortcode instead. For a full list of the options available to customize the shortcodes, check out our complete guide to WooCommerce shortcodes.

Advanced techniques for displaying WooCommerce categories

So far, I've shown you how to use WooCommerce to display categories on shop pages without any extra plugins. That will get you part of the way there, but it's pretty limited because:

Next, I'll share advanced techniques for displaying categories on the shop page more effectively. This includes:

How to optimize category display with WooCommerce Product Table

The problem with the default WooCommerce store layout is that it doesn't display much information about your products. It's just a basic grid.

This means that it doesn't even display what category each product is in. As a result, you have to restructure your store by category, for example by displaying categories first and products underneath 🙃

Instead, it makes more sense to list products as usual, while providing clear information about their category and the ability to filter by category. You can do this with the WooCommerce Product Table plugin, which displays products with category information on the shop page like this:

Customers can click the category filter dropdown to filter the shop page by category. The categories and subcategories in the dropdown are listed in a logical, hierarchical way.

Alternatively, customers can click a category in the 'Categories' column to instantly filter by that category.

As you can see from the screenshot, this way of displaying categories on the WooCommerce shop page makes much more efficient use of page. More products are visible per page, and it's easy to see which category each one belongs to. It's just as easy to find products by category.

And even more importantly, customers can select quantities and variations directly on the shop page, which isn't possible with default WooCommerce. They can then click the multi-add to cart checkboxes to quickly add to their basket.

How to display categories on the shop page with WooCommerce Product Table

First, I'll provide brief instructions on displaying categories on the main shop page. After that, I'll show you how to display products by category in order to create a separate table for each category.

1. Purchase WooCommerce Product Table and install it on your WordPress site.
2. Go to Products → Product Tables → Add New.
3. On the 'Create' page, name your table and select "Display on a shop page (e.g. main storefront, category page, etc.)".
   

   

4. You can then enable the table on the WooCommerce shop page, or other template pages such as your category archives. I recommend ticking all the boxes:
   

   

5. Choose which columns of product data to include in the list.
   

   

6. Set up the other options as required, for example by customizing the add to cart column and choosing how to sort the products.
7. Enable a category filter on the 'Search & Sort' page:
   

   

How to list products from a specific category

Above, you learned how to list products with their categories on the shop page, and on your main category pages.

Alternatively, you can use WooCommerce Product Table to create tables listing displaying by category and insert them onto any page on your site. This "WooCommerce get products by category" method retrieves all the products in a specific category and shows them in a table. For example, you can use this technique to create order forms structured into multiple sections like this build your own gift box website:

The instructions for this are mostly the same as above. The only differences are:

1. On the first page of the table builder at Products → Product Tables, select "Add to a page using a block or shortcode". On the next page, you can then choose which categories (or subcategories) display products from.
   

   

2. The last page will give you a WooCommerce shortcode that you can use to add the list of products displayed by category to a page. If you're not using the WordPress block editor, then copy this to the clipboard.
3. Lastly, create a new page and either add a 'Product Table' block (selecting the name of the table you created) or add the shortcode. This will display products by category on the page.

You can repeat the above steps to list products from different categories in different tables. To save time, go to the main list of tables at Products → Product Tables and duplicate an existing table. You can then edit it and change which category of products is displayed, leaving the other settings the same as required.

How to display category filters on the WooCommerce shop page

In the previous section , I showed you how to display a simple category filter dropdown above the product table. That's better than nothing, but the WooCommerce Product Filters takes this to the next level 🚀

The WooCommerce Product Filters plugin adds professional-level filters to your ecommerce store. Use it if:

• You don't want to use the product table layout shown above, but still want to add category filters to WooCommerce.
• You want more visually eye-catching category filters, such as clickable category images or checkbox filters.

For example, this store uses WooCommerce Product Table to display products, with WooCommerce Product Filters to add clickable category image filters:

Get started: Display categories on the WooCommerce shop page

I hope this article has answered the question "How do I show my categories on the shop page in WooCommerce"?

In this article, you've learned how to display WooCommerce categories on the shop page using the built-in methods. We've also looked at how you can get better results by displaying categories in more advanced ways:

• Use the WooCommerce Product Table plugin to create conversion-boosting product order forms, complete with category information.
• Use the WooCommerce Product Filters plugin to add eye-catching category filters to shop pages.

Do you have any questions about the WooCommerce product category list? Let us know in the comments below!

FAQ

How can I display WooCommerce product category names?

All of the methods discussed above will display product category names along with other data. If you just want to list category names with no other information, then you should use either the Product Categories widget or block. These are part of WooCommerce off the shelf, and display a simple hierarchical list of category names.

How can I show subcategories on the WooCommerce category page?

When you go to Appearance → Customizer → WooCommerce → Product Catalog, there's an option to show subcategories on category pages. Alternatively, you can show both WooCommerce subcategories and products. This displays subcategories as big thumbnails at the top, with individual products below.

Alternatively, use the WooCommerce Product Table plugin to list all products on the shop page with a 'Categories' column plus filter dropdown. These will both include subcategories and mean fewer clicks for the user.

How can I display a whole category of WooCommerce products?

There are 2 ways to do this, both of which I've provided instructions for above:

• Use a block or shortcode to display all the products from the selected category.
• Use WooCommerce Product Table to create a table listing products from one category only.