WooCommerce Product Filter Review: Flexible Filters for Your Store

WooCommerce Product Filter Review: Flexible Filters for Your Store

If you have a WooCommerce store, your goal should always be to make it as easy as possible for your visitors to browse your products so that they can quickly find the items they’re interested in (and make a purchase!).

If you have a lot of products, one of the best ways to do that is with product filters. You’ve probably experienced these when shopping online – you can filter by category, price, size, attributes, etc. Basically, filters let you take a whole big list of products and filter it down to only the items you’re interested in.

WooCommerce does include a few built-in product filter widgets to help you add this feature to your store, but they’re pretty limited and you can’t customize them to your store.

In our WooCommerce Product Filter review, we’re going to take a look at freemium WordPress plugin that lets you set up your own customizable filter system. You’ll be able to add filters for categories, tags, attributes, prices, keywords, custom taxonomies/fields, and lots more. What’s more, you can create different groups of filters and display them in different scenarios, so you can make sure that your filters are always optimized for specific products/users.

There’s also a special goodie for Elementor users – thanks to a dedicated integration, you’ll be able to do all of this directly from the Elementor interface, which is really convenient if you’re using Elementor to design your WooCommerce store. You don’t need to use Elementor, though.

Keep reading to learn more about what this plugin offers and see a hands-on look at how it works.

WooCommerce Product Filter Review: The Feature List

At a high level, WooCommerce Product Filter helps you add customizable product filters to your WooCommerce store, as I mentioned in the introduction.

You can choose from and mix-and-match a variety of different filter types:

  • Search by text
  • Categories
  • Tags
  • Custom taxonomies – fully compatible with the Custom Post Type UI plugin
  • Product attributes
  • Custom fields – fully compatible with the Advanced Custom Fields plugin
  • Price – a slider with min/max prices
  • Price range – choose from predetermined (and customizable) price ranges
  • Product author
  • On-sale products
  • Featured products
  • Product rating
  • Product stock status

Each type of filter includes a bunch of different input types that apply to that filter type. These input types depend on the exact filter. But in general, you can choose from the following options:

  • Radio buttons (single select)
  • Drop-down (single select)
  • Multiple drop-down
  • Checkboxes (multi-select)
  • Text
  • Buttons
  • Toggle switch
  • Slider
  • Color

You’ll also just generally get tons of options for controlling how each individual filter functions.

To display your filters, you can then choose from four different methods:

  • WordPress widget
  • Shortcode
  • PHP function
  • Elementor widget 

You can also use targeting rules to display different filters to certain devices (desktop vs mobile) and on certain WooCommerce content (e.g. a specific category of products). This lets you customize your filters to optimize them to the user and/or the products that a user is browsing.

WooCommerce Product Filter Pricing

WooCommerce Product Filter has a limited free version at WordPress.org that lets you access the basic filter features. However, to unlock all of the features that we’re covering in this post, you’ll need the premium version.

There are three license options for the premium version, all of which include all features:

  • One site – $49
  • Five sites – $99
  • Unlimited sites – $199

How to Create a Product Filter

Now, let’s go hands-on and I’ll show you how WooCommerce Product Filter works, starting with how to create your first set of product filters. 

As I mentioned, the plugin actually lets you create multiple filter groups and display them in different situations.

For example, you could display one set of filters for desktop visitors and another set for mobile visitors. Or, you could display different filters depending on the type of products that the shopper is looking at.

The plugin calls these “filters”, but it’s probably easier to think of them as “filter groups” because you can include multiple filter options inside a single “filter”.

To get started, you go to Woo Product Filter → Add New Filter.

Choose Which Filters to Include

In the first tab of the new group filter interface, you can use a drop-down to choose which filter options you want to include in this set of filters:

As you add new filters to your group, you’ll see them update on a live preview of your design. This is useful to let you quickly see how your filters will appear to shoppers (though the actual styling will be a little different and will automatically match your theme):

Adding multiple filters

For each filter option that you add, you’ll get lots of settings that are unique to that type of filter. For example, if you add a price filter, you can set min/max prices, configure the currency, change input behavior, and more:

Configuring a price filter

For some types of filters, you’ll be able to choose different types of inputs. For example, if you add the product categories filter, you can choose between:

  • Radio buttons (single select)
  • Drop-down (single select)
  • Multiple drop-down
  • Checkbox list (multiple select)
  • Buttons
  • Text

You’ll also just generally get lots of other options – flexibility is definitely one of WooCommerce Product Filter’s strong points:

Configuring a category

Overall, you’ll see the same level of detail for all the different filters.

In addition to the built-in filters, you can also create your own custom filters based on custom taxonomies or custom fields. 

WooCommerce Product Filter is fully compatible with both Advanced Custom Fields (ACF) and Custom Post Type UI, so you can easily set these custom filters up without any code.

Configure Additional Options

Once you’ve chosen and configured the filters that you want to use, you can go to the Options tab to configure some important settings for how your filter functions.

First off, you can choose whether or not to use Ajax for your product filters/search. With Ajax enabled, shoppers will be able to search and apply filters without reloading the page. On the other hand, if you disable it, shoppers will need to reload the page to see their choices.

You can also configure important targeting rules. You get two options:

  • Content targeting – display your filters on all WooCommerce pages or specific pages, categories, tags, etc.
  • Device targeting – show your filters to all visitors or only users on a desktop or mobile device.

You can also enable an option to force show only the current filter on a page if multiple filters might have overlapping display rules:

The general options

There are also three other tabs to configure additional options:

  • Buttons – configure the filter button and optionally add a “clear all filters” button.
  • Content – configure various options regarding the content of your page. For example, whether or not to update the product counts as a user applies a filter.
  • Loader – configure the loader icon that appears while filtered products are loading (or disable it completely).

Configure Design Options

To finish things out, you can configure the design options for your filters.

In the General tab, you can configure the width of your filters and also add your own custom CSS or JavaScript. For example, if you want to add your filters to your sidebar and you want to have them take up the full sidebar, you’d set the width equal to 100%:

The general style options

In the remaining design settings tabs, you have two options:

  • You can pull the styles directly from your theme, which is the default option. This essentially makes your filters blend into your theme’s styling.
  • You can override your theme’s styles to add your own custom styles.

If you choose to override your theme’s styles, you’ll be able to set up typography, colors, spacing, etc.

Using custom styles

Display Product Filters on the Front-End

To display your product filter(s) on the front-end of your store, WooCommerce Product Filter gives you a few different options:

  • WordPress widget
  • Shortcode
  • PHP function
  • Elementor widget 

For example, if you want to add them as a widget, you can add the Woo Product Filter widget and then use the drop-down to select your filter group:

Using a widget

And then here’s an example of what the filters look like pulling from my theme’s styling:

WooCommerce Product Filter example

Remember – you could add multiple widgets and each one will only display according to the targeting settings that you chose. For example, you could add two widgets – one that displays the desktop filters and another that displays the mobile filters.

The Elementor option is also a nice addition if you’re using Elementor to design your WooCommerce store. You’ll be able to fully configure your product filters without needing to leave the Elementor interface.

Final Thoughts on WooCommerce Product Filter

Overall, WooCommerce Product Filter helps you add customizable product filters without needing any special technical knowledge.

One of the biggest things that stood out to me is the depth of customization that you get when configuring any of your filters. You can choose from lots of different options to control input types, behavior, defaults, etc.

Beyond that, I also like how many filter types it offers. Beyond giving you lots of pre-built filters, it also lets you create your own filters for custom taxonomies or custom fields, which lets you adapt it to your store’s unique needs.

If you want to give it a test run, you can try it out with the free version at WordPress.org. Then, if you like what you see, consider upgrading to the premium version to unlock the more advanced features and filter types.

Have any questions about WooCommerce Product Filter? Ask away in the comments section!

Keep reading the article at WP Mayor. The article was originally written by Colin Newcomer on 2020-12-16 07:00:00.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top