New in WooCommerce Product Filters - Range sliders, custom field filters, step-by-step filters, and more

Version 1.1 of our WooCommerce Product Filters plugin is now available. Enjoy lots of new features including range sliders, custom field filters, step-by-step filter dropdowns, and Divi Builder compatibility. 

Our much-requested WooCommerce Product Filters plugin was released in August 2022. Since then, we've received lots of excellent feedback along with some interesting feature requests.

We love receiving feature requests because that is our customers' way of telling us how we can make the plugin better and better. As a result, we've listened to the feedback and have been hard at work building version 1.1. Keep reading to learn about all the new features and how they work.

Range slider filters

WooCommerce Product Filters has always had a range slider for price. For example, you can see it in this screenshot:

Lots of our customers have requested range slider filters for other types of product data too. We're happy to say that this is now available.

You can add range filters for attributes, categories, tags and custom fields - basically, any product fields where you're likely to add a number.

This is how to use it:

1. Install the plugin, go to Products → Filters, and add a filter to any filter group.
2. Choose to filter by either attributes, categories, tags, or custom fields. Select an attribute/category/tag/custom field as needed.
3. Select a field type of 'Range slider'.
4. A 'Range unit' field will appear underneath. Type a label which will appear under the range filter. For example, imagine that you're creating a range filter slider for weight and have entered attributes with various weights between 5kg and 20kg. Here, you would enter a unit of 'kg'.

Now when you view the range slider filter on the front end, you will see it displayed with the numbers available to select in the slider (e.g. 5, 10, 15 and 20), and the 'kg' unit underneath.

Related: Complete guide to creating WooCommerce product attribute filters.

Custom field filters

Over the years, lots of customers have asked us for a way to filter by custom field in their WooCommerce store. Not just our WooCommerce Product Filters customers - our Product Table customers have been wanting it too.

As a result, we have now added a custom field filter to WooCommerce Product Filters. This is how to use it:

1. Add the custom fields that you want to create filters for to the 'Products' post type on your WordPress site. We recommend using either Easy Post Types and Fields (free plugin) or Advanced Custom Fields (free or pro). If you're using ACF, make sure you use the radio, select, true/false, text or number custom field types.
2. Create a filter and choose to filter by custom field.
3. Choose a style for the custom field filter. You can choose between dropdown lists, radio buttons, checkboxes, range sliders, or text input fields. Most of these are self-explanatory, and the text input field allows customers to type into a text box to search by custom field. 

Learn more about filtering WooCommerce products by custom field.

Step-by-step dropdown filters

Several customers have asked for a step-by-step folder, where you select a category from one dropdown and then an additional dropdown listing its sub-categories appears. This then continues depending on the depth of the category structure.

For example, let's say that you're selling car parts in WooCommerce. You first select a make, such as 'Audi'. A second dropdown now appears listing the models, e.g. A4, A4, and so on. When you select a model, a third dropdown appears listing the car parts for that model.

This allows customers to drill down to find the exact products they need. Depending on your use case, this can work better than a single dropdown where the categories are listed hierarchically (which was already available in the plugin).

The new step-by-step filters are available for product categories or any other type of hierarchical taxonomy for your WooCommerce products. When you add a dropdown filter, you'll see a new tick box where you can choose whether to display the sub-categories within the same or separate dropdowns.

Divi Builder compatibility

The product filters are now compatible with Divi Builder. This means that you can design your shop pages using Divi Builder and add filters to the page, either via a shortcode or widget.

Previously, you could design your shop pages using Gutenberg blocks, WooCommerce shortcodes or Elementor, but not other page builders like Divi Builder. We will keep tracking the demand for integration with other page builders.

How to get the new features

If you're already using WooCommerce Product Filters, then you can update from the WordPress admin as usual. We recommend reading the full changelog first.

If not, then get the plugin today and start making it easier than ever for your customers to find the products they want.