In this guide, we’ll walk you through how to add a filter by category widget to your WooCommerce store. If you’re looking to save customers clicks and help them find the product they’re looking for faster, then you’ll need to add filter by category to your WooCommerce sidebar.

By the end of this guide, we’ll show you how to get this done and as a bonus, we’ll teach you how to improve your product filters even further by adding swatches.

improved product filters

Why add filter by category to WooCommerce

How many times have you visited an online store and found yourself clicking backward and forwards through multiple product pages trying to find what you’re looking for?

This frustrating process is lengthy and can lead to decision fatigue for customers.

If customers can’t filter through products in your store, they can’t find the product they’re looking for quickly enough.

If they can’t find it, they can’t buy it.

Research on user behavior says it takes just 15 seconds for a visitor to decide if they’re going to click off your website or not (and some even say 0.05 seconds!).

So if you only have up to 15 seconds to make a good first impression, you’ll want to make sure you lead your customers to the right products, quickly.

The good news is, there’s a way to reduce the number of clicks a customer makes while browsing your store.

The technique in question is to improve the product filters on your shop and category pages.

filter by woocommerce

Your category pages have a lot of potential. With just a few changes they could make you more sales and vastly improve the shopping experience for your customers.

These changes don’t have to require any coding knowledge and can have a massive return on investment for your store.

In the next section, we’ll start with the first technique. Which is to add filter by category to your WooCommerce shop sidebar.

How to add filter by category to WooCommerce

So let’s get to it. Here’s how to add a filter by category widget to your WooCommerce category and shop pages:

  1. From your WordPress sidebar, go to Appearance > Widgets.
  2. On the next page, you should see a white box at the top with a plus symbol. 
add widget
  1. Click the plus symbol and type ‘Product Categories List’ into the search area. Click the Product Categories List widget to add it.
filter by category woocommerce sidebar
  1. The widget will now appear on the Widgets page. You’ll be able to customize how the categories displays, if you’ll include product counts, show empty categories, and more.
filter by category settings
  1. Once you’re happy with your selection, click the blue Update button at the very top of the page.

Now your customers will be able to filter through product categories using your shop’s sidebar.  

How to create a WooCommerce category dropdown

If you’re looking to change your category filters to a dropdown instead of a list, take the following steps:

  1. While still editing your Product Categories List widget, in the List Settings section on the right, change List to Dropdown.
  2. Then click the blue Update button at the top of the page.

So now we’ve improved your WooCommerce category page by adding filter by category, let’s take it one step further. In the next section, we’ll show you how to take your product filters to the next level.

Improve your WooCommerce product filters further

Adding category filters to your shop sidebar is a fantastic place to start. But to really save customers clicks and help them find products faster, we can take it one step further.

Improve filters with color and image swatches

In WooCommerce, variable product attributes are displayed as simple words with checkboxes when filtering. This experience could be so much better and more visual for the customer.

attribute swatches filter

With WooCommerce Attribute Swatches your customers will have an easier and clearer way to search or filter items in your store. Instead of simple words or checkboxes, customers will be able to filter with swatches. This makes it much quicker and easier for them to find the product they’re looking for.

WooCommerce Attribute Swatches

Turn your WooCommerce product options into color, image, or text swatches. Instantly enhance your customers' online experience.

Get to grips with WooCommerce product filters

The quality of your product filters could be make or break for your customers.

They could either find what they’re looking for without friction, or they could struggle and leave your store without buying a thing.

With filter by category and WooCommerce Attribute Swatches set up on your store, you’ll help customers find what they’re looking for so you don’t miss out on precious sales.