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“.
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:
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.
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:
And this is the Shop page once these filter widgets are active:
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:
- Price
- Sale Price
- Regular Price
- Average Rating
- Stock Status (in stock / out of stock)
- On Sale
- Product Categories
- Product tags
- Product attributes
As you can see creating a WooCommerce facet is pretty straightforward:
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.
5. JetSmartFilters by Crocoblock
JetSmartFilters by Crocoblock is an easy to use plugin with AJAX-based filter system and 9 handy widgets which make a WooCommerce website user-friendly without writing any single line of code:
- Rating filter – arranges products by rating.
- Visual filter – highly effective for online shops that stock different colors or brands.
- Search filter – allows searching either by words or phrases and quickly displays the corresponding results.
- Radio filter – provides an option to choose one product or post from the list.
- Checkbox filter – lets choosing several options from the checklist.
- Date Range – a good option if you are going to filter posts or products based on the date they were added or events by the date when they’re supposed to take place.
- Check Range filter – helps to create a range of options in the form of a checkbox list.
- Range filter – allows you to set up the search range with the help of a slider.
- Select filter – lets choosing options in the form of a drop-down list.
Additional widgets inside the JetSmartFilters plugin help website users to go through the relevant products without refreshing the page, see filters currently applied and remove the necessary ones for more convenience.
JetSmartFilters is closely connected to another addon produced by Crocoblock – JetWooBuilder. This plugin is a must-have tool for ecommerce website creators as it provides versatile options to showcase the products starting from different variations of product grids up to review and rating forms.
Hi There,
I can’t find any product filter which will work with the variable product and in stock. The issue is let’s say customer is filtering the product with size “M”. Now if shows all the products which have variations “M”. Some of the products does not have stocks with size “M”. How will i show only the products which have stocks with the filtered variations.
Thanks!!!
Hello Sujon, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Rodolfo,
Is there a possibility to synchronise the filters in the categories with those in the search.
If for example we use woof categories as a plugin it is fine for the filters in the categories but it is not synchronised with the search. Example if I do an ‘x’ search I have filters on the whole set of products instead of just the results.
Do you know of a plugin that integrates category filters and search filters.
Thank you
No idea to be honest, sorry. Did you ask the Woof developers already?
Hi, fyi, WooCommerce default filtering has some errors: https://wordpress.org/support/topic/missing-attributes-in-product-filter/
Its’ not you making a mistake 🙂
Thanks!
hello
i want to delete the word “all” in y filter, how can i do?
Ask the plugin dev please
Hi there! My client wanna have filters on the page where I am displaying products on sale. But I can’t apply filters over there. I think there must be something special that we need to do to show filters on pages other than the shop page?
It depends on how you coded the products on sale page. You could try placing filters in the page sidebar and see if they work
Hi, I want to enable the filter using woocommerce native filter. I did work but for a reason only the dropdown filter dosent work… Nothing change on the page when I select…
Did you contact WooCommerce support?
Hi,
Hope all are doing good.
I realised WooCommerce has several options to filter using widgets and so on. However, my requirments made me to buy JetSmartFilters from CrocoBlock and started using it. I have a clarification regarding “Range Filter”.
*** I am using “Range Filter” for my products prices, I do understand the price is connected with WooCommerce with query variables. However I need to use “Range Filter” for other attributes also like my manual attributes for measurements (like 5 Cm – 10 Cm – 20 Cm). I tried it but the result is failure. ***
Can anyone can guide me ?
Thank you in advance.
Hi Maddy, did you ask the plugin devs already?
Hello! great article, i am looking for a plugin that will use drop down list in order to filter the results, eg
three dropdown form fields the first will search the vendor, the second the model and the third part category
is it possible?
I guess so, please ask the plugin vendors
Hi, I’m looking for a simple filtering plugin that will allow me to add above shop products filtering boxes like here https://codepen.io/joe-oli/pen/KKwqRdw. Do you know something?
I think almost all plugins mentioned in this article should let you do that. Maybe it’s worth contacting their support teams to see if they can help?
Hi Rodolfo,
I have a question which I was not able to find in support forms, could you please can you write me your quick comments please? I want to use two filters for two different categories on one page. Web page for vehicle parts, on home page I am using tab widget and in first tab filter should sort passenger vehicle parts on second tab it should sort commercial vehicle parts. I have already created two different categories with sub categories. Could you please let me know if WooCommerce plugin Products Filter can work in this way.
Thanks!
Ask the plugin developers directly. In my opinion, you can have as many “category filter” widgets as you like, but I’m not 100% sure.
Hi,
Is it possible to show woo-commerce price filter on custom page?
Syed, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Rodolfo,
Great article. One of the things that I cannot find on the web is where exactly does woocommerce native product search actually search? Might sound slightly daft but… Somebody searched our website for “Nanny”. I know we have a product variation, in fact 63 variations that contain the word “Nanny” in our florist card catagory. So kind of obvious, it is not searching the variations of a product or I am not optimising the variation for the word “Nanny” to be found. I cannot find anything to give me a clue as to what the product search is actually doing. Can you shed some light on this perhaps?
Many thanks in advance. Ian
Hey Ian, as long as I remember, it searches for Product Title and Product Description. So if you have a variable product, it will only search through the “parent” product and not its variations.
Great articles. Great website. I have a query. How can I have static sort and filter buttons on archive in woo?
Thank you! The sorting dropdown is already in the shop page, do you mean that one?
Hi I am trying for the last 4 months to make my WooCommerce WordPress site have the same functionality as the site below, but it does not seem to be possible. with any of the Filter extensions offered. Although many extension writers claim that their product is able to do so, and offer money back guarantees instead of definate advice
https://www.machinemart.co.uk/c/diy-semi-professional-air-…/
On the site above as the Main menu category changes so does the set of attributes available in the widget. INCLUDING THE BRAND.
Is this possible to achieve WITH WOOCOMMERCE as we have 12 different Main Categories on our WordPress site
We have set 5 different Woo attributes (visible on the front end) on each of 700 products, and Marked the correct Brand.
Now I am looking to filter them.
Another problem we have had in the past (with filters that we have tried) is that the Brand might apply to more than one category
i.e. The Brand I’ve used here “Clarke” manufacture “Air Compressors” but they also make products in the “Fans & Air Conditioning” category and the “Water Pumps” category. Can ANY plugin make the Brand count separate for each main category so that it only applies to the relevant category even though the Brand might be the same in more than one category?
I have linked to an image to show what I am trying to achieve.
https://snag.gy/dbfe8V.jpg
Most Grateful for any help you can supply.
Hello Jeff 🙂 If no plugin suits, then you need to custom code it. I’m not sure WooCommerce or a plugin can do that out of the box
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
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
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?
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 🙂
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
Thanks Dima 🙂
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
Michael, thanks for your comment 🙂 Let’s hope they fix this!
I would like to add i am using the YITH and it works good with WPML in 4 languages
Nice, thanks Mark 🙂