Posted on

How to Enable WooCommerce Product Filters (i.e. “Ajax Filters”)?

If your WooCommerce store has many products, online customers might get easily lost. There might be way too many pages to visit (“product pagination”) before finding the product they’re looking for. Needless to say, this is a huge loss for your business. Possibly, they’ll never come back.

If you shop on popular ecommerce websites such as Amazon and eBay, you know they carry a billion products each or so. Thankfully, on top of the very useful search bar, these websites provide “product filters” in the sidebar. You can refine by price, reviews, tag, category and so on; the website won’t “refresh” but instead it will return the filtered results immediately on that same page.

These are called “Ajax Product Filters” (Ajax is a set of applications that run in the background without forcing a website page refresh). And as Amazon and eBay just proved to you, these filters are absolutely a must if you have 100+ WooCommerce products.

Luckily, there are plugins for that. And they’re either free or quite cheap when you compare this small cost to your potential Return On the Investment (ROI).

Besides, if you have lots of products you also already have several WooCommerce product categories, product tags, product attributes, product custom fields, prices, stock statuses. This means that implementing Ajax Product Filters in your WooCommerce store might be a matter of 10 minutes: activate the plugin, choose the filter criteria and your users will automatically see a smooth filter widget in the sidebar!

So, what are the best “WooCommerce Ajax Product Filter” plugins?

1. WooCommerce Default Product Filter Widgets (FREE)

Surprise 🙂

WooCommerce gives you product filter widgets by default. To use WooCommerce inbuilt filters, go to Appearance > Widgets and drag & drop the following filters in your sidebar: “Filter Products by Attribute“, “Filter Products by Rating” and “Filter Products by Price“.

WooCommerce inbuilt product filter widgets

Some of my test products have an attribute called “Size”, so I set up the “Filter Products by Attribute” widget to filter product sizes. This is all automatic, as long as your products have existing attributes. Now the front-end looks like this:

WooCommerce Shop page with the default WooCommerce product filter widgets enabled

In about 1 minute, I was able to add filters by attribute, rating and a price “slider”. Super easy. However, there two major problems: these WooCommerce filters are not powered by Ajax (hence the page “reloads” after using one of the filters) and they’re way too limited. There are only 3 default widgets, you can only have attribute dropdown or list, only have a price slider and not a list of price ranges á la Amazon… basically you can’t do much with this setup.

You probably need more advanced widgets, more design options, an Ajax-powered system and something more robust yet flexible.

2. Ajax-Enabled Enhanced Layered Navigation plugin by WooCommerce (PREMIUM)

This official plugin by WooCommerce is a great first step towards product filtering perfection. This plugin provides a better UX and more widget options than the default non-Ajax inbuilt product filter widgets.

Once active, Ajax-Enabled Enhanced Layered Navigation plugin gives you an additional widget you can use on the shop / archive / category pages called “WooCommerce Ajax Layered Nav“.

The great thing about this advanced widget is that you can decide how to show the attribute filter on the front-end i.e. as a list, checkbox, drop-down, or label selector / color swatches.

WooCommerce Ajax Layered Nav plugin widget setup and front-end result

Pity there is no demo I can direct you to. You can use as many widgets as you like, but there is no price filter, rating filter, stock filter, etc. This is just for attributes (size, color, etc).

So, unless this is sufficient for your objectives, this plugin is not complete.

3. WooCommerce Ajax Product Filter plugin by YITH (FREE & PREMIUM)

When it comes to YITH, you know they have a WooCommerce plugin for everything… needless to say they also sell an advanced Ajax Product Filter plugin.

Good news is – this also comes as a free version (which does almost the same things as the WooCommerce premium plugin we described in the previous section). Besides, from the plugin page you can view a demo and test the product before purchase.

Once the premium plugin is active, you’ll see 5 new widgets:

  • Ajax Sort by (this sorts products as per the WooCommerce sorting options, but it does it with Ajax!)
  • Ajax Product Filter (sort by attribute / category / tag / brand and display as dropdown / checkboxes / list / swatches / labels)
  • Ajax Price Filter (create price ranges in a filterable list)
  • Ajax Stock/on Sale Filter (add a widget to filter in/out product on sale or in stock)
  • Ajax Reset Filter (reset filters with a single click)

This is the back-end:

YITH WooCommerce Ajax Product Filter back-end

And this is the Shop page once these filter widgets are active:

Shop page sidebar after installing the YITH WooCommerce Ajax Product Filter plugin

You have unlimited filter combinations and can use multiple “Ajax Product Filter” widgets. This means in the same sidebar you can filter by attribute, tag, category, price and/or brand at the same time. And without refreshing the page – results display immediately.

As you can imagine, YITH WooCommerce Ajax Product Filter is compatible with all the other YITH plugins and can therefore do pretty advanced stuff.

You can also “toggle” each widget and make it “closed” by default. Besides, within each widget you can select / deselect which attribute / tag / category should be excluded from the filter.

Yes, this is very flexible. And it works.

4. FacetWP (PREMIUM)

Last but not least, FacetWP, a powerful filtering tool also compatible with WooCommerce, is a very advanced product for developers – if you want to make the most of it some technical knowledge is indeed required. It comes with hooks, shortcodes, performance-driven Ajax coding and integrations.

To add a filter, you must add a shortcode into a text widget or – even better – add it via PHP into your theme files (this means you can also display the filters outside the sidebar).

FacetWP allows you to create several “facets”, i.e. filter displays, such as:

  • Checkboxes
  • Dropdown
  • fSelect
  • Radio
  • Hierarchy
  • Slider
  • Search
  • Autocomplete
  • Date Range
  • Number Range
  • Star Rating
  • Proximity

In regard to WooCommerce, each facet or product filter can target the following data sources:

  1. Price
  2. Sale Price
  3. Regular Price
  4. Average Rating
  5. Stock Status (in stock / out of stock)
  6. On Sale
  7. Product Categories
  8. Product tags
  9. Product attributes

As you can see creating a WooCommerce facet is pretty straightforward:

FacetWP: select the appropriate data source choice such as product attributes, product categories, and so on

FacetWP comes with great developer documentation and is a must-have for advanced projects. If, on the other end, FacetWP is too much for you, then my preference would be the YITH WooCommerce Ajax Product Filter plugin.

Enjoy, and let your customers filter 🙂

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

2 thoughts on “How to Enable WooCommerce Product Filters (i.e. “Ajax Filters”)?

  1. I would like to add i am using the YITH and it works good with WPML in 4 languages

    1. Nice, thanks Mark 🙂

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.