WooCommerce: Why & How to Improve Product Filters

Many times, ecommerce customers are unable to find what they’re looking for quickly and easily. There are plenty of reasons for this, ranging from poor site design to a lack of search and filtering options.

By improving product filters in your WooCommerce online store, you can help customers narrow down their search. This makes it easier for them to find the products they’re looking for.

In this tutorial, we’ll show you how to add advanced product filters, and explain why you should.

Why do I need better product filters?

WooCommerce comes with basic product filters out of the box. They let customers filter products by price, rating, or attributes. Each filter has one specific style and doesn’t come with many options. 

If you have a large product catalog, you need to make it easy for customers to filter through your products and find what they’re looking for quickly. For this, you’ll need to improve the product filters in your WooCommerce store.

According to an Econsultancy study, a kilt retailer buyakilt.com saw a 26% increase in conversions and a whopping 76.1% boost in revenue after implementing a product filter that gave visitors an option to shop by kilt type and kilt pattern.

Product filters help narrow down the choices while improving product visibility for the types of products customers are looking for. By improving product filters in WooCommerce, you can make it easy for customers to find exactly what they’re looking for and also enhance the user experience.

Choosing a WooCommerce products filter plugin

When it comes to choosing a WooCommerce product filter plugin, you want to make sure you’re going with a trusted developer.

Look for a high-quality plugin that has the features you need for your online store. It also helps to read customer reviews to learn about other people’s experiences with the plugin.

From a more technical standpoint, these are the features you should keep an eye out for in a products filter plugin for WooCommerce:

  • Do the product filters work using AJAX or page reload? Or can you choose either?
  • What data can customers filter by to narrow down their search?
  • What types of filters are available?
  • Which WooCommerce pages can you add product filters to?
  • Does the plugin look professional and well designed? 

These questions will help you find the right products filter plugin for your online store.

Introducing WooCommerce Product Filters

Barn2’s WooCommerce Product Filters plugin lets you create individual product filters, structure them into groups however you want, and display them anywhere on your website.

You can choose to have product filters work using AJAX (customers will see filtered products instantly) or page reload (customers will see results after clicking an Apply Filters button).

The WooCommerce Product Filters plugin can be configured to filter products in the entire product catalog or on the current page only.

There are plenty of filters to choose from including categories, attributes, colors, tags, custom taxonomies, price, ratings, stock status, and on sale status. In addition to this, the plugin only shows valid and relevant product filters on the front-end i.e. no empty filters.

The different filter styles include dropdowns, radio buttons, checkboxes, color swatches, images, tag clouds, labels, price sliders, and more.

As a store owner, you can configure the WooCommerce Product Filters plugin to deliver the best user experience possible for the types of products you sell.

How to add advanced product filters to WooCommerce

As we have seen, the easiest way to improve product filters is to use the right WooCommerce plugin. Here’s how you can add advanced product filters to your online store using WooCommerce Product Filters.

Step #1: Get the WooCommerce products filter plugin

Get the WooCommerce Product Filters plugin. You’ll receive the plugin files along with a license key in a confirmation email.

Log into the WordPress admin panel. Install and activate the WooCommerce Product Filters plugin. 

The plugin setup wizard will open. This will walk you through entering your license key, and choosing the main settings for your filters. 

Step #2: Create products filters

Go to Products → Filters page and either open the default filter group (which has been added for you) or create your own. Create the ‘Add new filter’ button and add information such as its name, the style of filter, and what data you want to filter by. There are lots of options, to have a play to see which ones are best for your specific products. 

If you want to create a category filter, for instance, you’d set the filter data option to Categories. You can then choose from lots of styles which are available for filtering by category in WooCommerce. This includes dropdown lists, checkboxes, radio buttons, and clickable images or text clouds.

When you create an attribute filter in WooCommerce, there are even more options. You can choose the style, and which global attribute to display. Alternatively, there’s a smart attributes filter option which will dynamically show attribute filters which match the products on the current page. This saves you having to manually show different filter groups on different pages in your store. 

Create as many filters as you need for your product catalog. If you want to show different filters on different pages, then create a filter group for each set. 

Step #3: Add products filters to shop pages

After you’ve added some filters, you’re ready to start displaying them in your shop. There are 2 main ways to do this, depending on where you want the filters to appear. 

When you did the setup wizard in Step 1, you might have noticed an option to display a particular filter group above all your store pages. This is a great option if you want filters to appear on top of the list of products. To get back to this setting, go to Products > Filters > Settings

You can also add filter widgets to your shop sidebar. This can be instead of showing filters above the shop, or you can do both. For example, if you do both then you might show some filters above the list of products, and other types of filter in the sidebar. This creates a truly immersive experience for your customers. 

To add filter widgets, go to Appearance / Widgets in the WordPress admin. Add the ‘Product Filters’ widget to your shop sidebar, and choose a filter group. 

(Note: Since most mobile sites don’t display sidebar widgets, the WooCommerce filter plugin will hide these widgets on mobile. Instead, mobile users can click a button to view filters in a popup slide-out panel. Smart!)

There are also more advanced ways to display filters in other parts of your store, for example within an Elementor or Gutenberg block. You do this by adding a shortcode wherever you want the filters to appear. It’s super-flexible, so refer to the filter plugin documentation for full details.

Bonus: edit product filter visibility

The WooCommerce Product Filters plugin lets you choose how you want the products filter group to appear when a customer first lands on the shop page. You can choose to:

  • Hide filters by default – To save space, you can have the products filters hidden initially. Customers can view the filters by clicking a button. You can also change the Show filters button text. You can do this either on mobile and/or desktop. 
  • Allow customers to toggle filters open and closed – If you have lots of filters or product attributes, then they can take up a lot of space on the page. To reduce this, enable the option to make each filter collapsible. You can set the toggles to either open or closed by default, and customers can click to show/hide each filter. This looks really neat and is a good way to save space while still providing advanced WooCommerce filters for customers. 

By default, the WooCommerce Product Filters plugin hides filters on mobile devices and shows them on desktop devices. That’s because there’s more room to play with on full size screens, so it’s generally good to have the filters visible all the time. 

Transform your store with the best WooCommerce filter plugin

The product filter options that are built into WooCommerce aren’t sufficient for helping customers find products quickly and easily. Instead, you need an advanced products filter plugin that makes it easy for customers to narrow down their search. This helps them to find the products they’re looking for faster.

The WooCommerce Product Filters plugin lets you create all sorts of product filters, group them in a logical way, and add them to your WooCommerce store pages in a few steps. It’s perfect for stores with large product catalogs.

Ready to speed up shopping in your store? Get WooCommerce Product Filters today!

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.

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. 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 BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Your email address will not be published.