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.

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

  1. Hello,
    I have been reading your articles for some time now, I always learn something new, thank you very much.
    I have a question about product filtering.

    In the top menu bar on white background first on the left is „WYSZUKAJ WG CECH:” button which means SEARCH BY. On hover appears widget with global product attributes and you can search for products by these attributes.

    Currently, I managed to do, that product filtering appears only on store pages (not on static ones) and unfortunately after selecting at least one attribute, the website automatically filters the products, the entire container with filters disappears and reappears on mouse hover. I used the Mega Menu plugin to do it.
    I’m trying to achieve:
    1. Product filtering will appear on every page (on hover or on click), not only on the category page, but also on static pages like CONTACT or ABOUT US
    2. The products will be filtered only after selecting all interesting attributes and clicking the FILTER button
    Is there any PLUGIN which does these things? If the changes require writing code in PHP, I also manage it somehow, but I do not what should I chande – I’ve searched the whole Internet 🙂

    I know what theme it is, I don’t want to buy it, I have entire website made only without this one functionality.

    Can you please help me?

    Have a nice day
    Kachna

    1. Hello Kachna, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  2. Hi! Thanks for the analysis Rodolfo! I have a question… In my case, I am selling spare parts for spa-baths and swimmingpools. In order to make the most out of filters, I would need to use different type of filters depending on which category of products the customer is looking at…
    Example based on clothing/shoes: If you sell both shirts and shoes, a filter based on size would be different depending on if you are looking at the shirts or the shoes…
    One way of solving this problem (based on your article above) might be to use shortcodes in the category descriptions… However, it seems better to be able to put this in the widget area but not sure how/if that could be done.
    Any thoughts on this?

    1. Hey Tobias, thanks for your comment! I’m pretty sure you can use “widget logic” (https://wordpress.org/plugins/widget-logic/) to show/hide widgets based on where you are. Hope this helps 🙂

  3. In WooCommerce has a new extension “WooCommerce Product Filters”.
    https://woocommerce.com/products/product-filters

    Features:
    – Quick filtering of products using AJAX technology
    – Filter by criteria: categories, attributes, tags, taxonomies, price
    – Pagination and product sorting without reloading page
    – Elements: price slider, checkbox list, radio list, dropdown, color list, box list, text list and others
    – Widgets “Products Filter” and “Notes for Product Filters”
    – Shortcodes and integration with product shortcodes
    – Adaptive filter options and product counts

    1. Thanks Dima 🙂

  4. The biggest problem of woocommerce regarding the filters options is that.

    Let’s say we have a clothe store and we have 3 products (T-Shirts) with variations: Small, Medium, Large.

    If one of these product has the Medium variation Out of Stock and in filters you choose to bring the products that they have Medium in variation, it also brings the product with the out of stock variation.

    This is really frustrating and we would be glad if there was a custom script or snippet to prevent that from happening.

    Other people have reported this also.

    https://github.com/woocommerce/woocommerce/issues/20800

    https://github.com/woocommerce/woocommerce/issues/20689

    1. Michael, thanks for your comment 🙂 Let’s hope they fix this!

  5. 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 are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)
¯¯¯¯¯

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.