How to Customize the WooCommerce Product Filter

Allowing customers to filter products in your WooCommerce store is one of the simplest ways to improve user experience and increase sales. WooCommerce product filter options make it easier for customers to quickly find products and add them to the shopping cart.

However, the standard product filter options that come with WooCommerce are fairly basic. So by the end of this article, we’ll have shown you 2 ways to customize your product filters with the help of some plugins.

How to add product filters to WooCommerce

First thing’s first, let’s get your product filters set up and running.

Depending on your store’s theme, these steps might look slightly different. So make sure to check your theme’s documentation if you get stuck.

When you first set up your store, you might find the sidebar on your main shop page is missing. This isn’t because it’s not there, it’s simply because you haven’t added anything to the sidebar yet.

So, to add your product filter widgets, take the following steps:

1. From your WordPress dashboard, go to Appearance > Widgets.
   • On this page, you’ll see a bunch of widgets with titles like ‘Archives’ and ‘Basket’ on the left. You’ll also see the widget ‘areas’ on the right. These might include ‘Sidebar’, ‘Footer Column 1’ etc, depending on your theme.

2. We’re looking to include some of the key product filter widgets in the sidebar. This includes ‘Filter Products by Price’, ‘Filter Products by Attribute’, and more.
3. To add these, drag the widget on the left, over to the Sidebar widget area on the right. Do this until you’re happy with your added filters.

4. At this point, you can customize each filter widget by changing its title and more. You don’t need to save this page because it saves automatically.
5. Once happy with your selection, view your store on the front end of your site and your new product filters will be added.

Now we have your product filters set up, let’s give them a boost with some plugins.

Improve product filters with a WooCommerce product filter plugin

The standard WooCommerce product filters do a good job of allowing customers to sort through products and find what they’re looking for. But they could be working harder. 

Below we’ll outline a few ways you can improve your product filters to help you make more sales and improve your customer experience too. All with the help of some plugins.

Filter and show variations as single products

WooCommerce Show Single Variations allows you to show variations on the WooCommerce search and filter results pages as if they were ‘simple’ or single products. These then link through to the parent variable product page with the options pre-selected.

By doing this, filtered products will show relevant variations and images rather than a generic parent product. Customers won’t have to go to the single product page to select the correct variation using dropdowns.

The more accurate you make your filter and search results, the higher the chance for a sale!

Add color and image swatches to your product filters

In WooCommerce, variable product attributes are displayed as simple words with checkboxes when filtering. 

While browsing the products in your store, customers have come to expect a better experience. 

By adding color and image swatches to your product filters with WooCommerce Attribute Swatches, you’ll give customers a much more visual way to browse. One that will help them find the product they’re looking for, faster.

Not only this, but with WooCommerce Attribute Swatches you can change the appearance of any attribute in your store’s filter options. Attribute Swatches allows you to use anything from color and image swatches to text-based and radio buttons.

For more advanced filters, we recommend the WooCommerce Product Filters plugin. As well as using AJAX (no more page reloads), you get several extra filter styles. These include radio buttons, text labels, and even clickable image boxes. You can also add filters above the list of products and in sidebar widgets. It’s a much more visual and flexible way to filter by category and is designed to work alongside WooCommerce Show Single Variations.

Get customizing your WooCommerce product filters

Giving customers the ability to filter WooCommerce products by variation can help you increase product visibility and boost sales. Similarly, giving them a better visual experience with attribute swatches will help them find what they’re looking for, faster.

Making these changes to your WooCommerce product filters will be invaluable when looking to increase sales in your online store.

Get both up and running today:

• WooCommerce Show Single Variations – Show variable products as single products on the shop, filter, and search results.
• WooCommerce Attribute Swatches – Add color and image swatches to your product attributes.