The YITH WooCommerce AJAX Product Filter plugin allows you to create unlimited filters to help your customers quickly find the products they are looking for.

The plugin works with product categories, product tags, and product attributes. Before creating the filters, you need to set up the categories, the tags, and the attributes in WooCommerce and then associate your products to the proper category/tag/attribute.

For example, to create a “Filter by color” option you have to create the “Color” attribute in Product > Attributes, set the values (black, white, red… all the different colors), and then, associate each product to the right color.

Read more about how to create attributes in WooCommerce

How to create a preset of filters

1- In the Filter presets tab you can edit the default preset included in the plugin or click on the “Add preset” (1) button to create a new one. 

Add preset

2- Enter a name to identify the preset. For example: “Shop filters” (2). 

3- Click on the “Add a new filter” button to start adding filters to the preset (3). 

Add a new filter

4- Enter a name to identify the filter. For example: “Filter by color” (4). 

5- Choose the taxonomy to use for filters. Note: If you don’t have custom attributes created, you will only see “Product categories” and “Product tags” to select. To create a filter by color, size, material, etc., you have to create these attributes first in Products > Attributes. Then you will also see those attributes in the select list (5).  

Filter name and taxonomy

6- Choose if you want to automatically populate the filters with all the terms (6). In this way, if you created 10 different colors as attributes, all 10 colors will be automatically shown in the filter. This option allows you to automatically update the filters with terms added later on, so if after two weeks you add another color attribute, it will be automatically added to the filter.  

Auto-populate with all terms

7- If you don’t enable the automatic populate options, you have to choose the attributes to show in the filter (7). You can select all colors or just some of them.  

Choose terms

8- Choose the filter type (8). You can choose between checkboxes, radio buttons, select, plain text, color swatches or labels. To create a “Filter by color” we can use the “color swatches” type. 

Color swatches

9- Choose the label position (9): you can hide the color label and only show the color swatches, or set the position of the text. 


10- Choose how many columns to show per row (10). If you have 8 colors and you want to show 4 color swatches per row, enter “4”. 

Columns number

11- Customize the terms to show (11). You can customize the label, set a tooltip and use the color picker to set the color to show in the color swatch. 

Terms options

12- Choose if you want to allow users to select multiple options or not (12). If enabled, the user can select two different colors—for example, “red” and “black”. If disabled, when the user clicks on the second color swatch to select it, the first color will be deselected. 

13- If the option “multiple selection” is enabled, you can choose how to use the filter in this case (13): 

AND: the plugin will show only products with both colors set as attributes (example: a T-shirt with both red and black colors as attributes will be shown, a T-shirt with only the black attribute will not) 

OR: the plugin will show all the products that have red OR black as attributes 

Multiple selection

14- Save the filter and then save the preset. 

The first filter of the preset is ready! You can now add other filters following the same steps. 

How to insert the filters preset on the Shop page

When you create a preset of filters, you can choose how to insert it on your Shop page: 

1- Open your Shop page with the block editor and use the YITH AJAX Filters Preset block to insert the preset into the page. First, you have to add the block, and then you can select which preset to insert on the page. 

Filters preset block

2- You can also insert the preset shortcode on the page, where you want to show the filters. 

Preset shortcode

You can follow this procedure to show filters on any custom page. 

General settings

In the General settings tab, you can find some options to customize the way the plugin works.

General options
  • The “Filter mode” mode option allows you to choose whether to apply filters in real-time using AJAX or to show a button to apply all filters
  • With the “Show results” option you can choose whether to load the results on the same page using AJAX or to load the results on a new page
  • The “Lazy filters loading” option allows to load filters asynchronously using AJAX to speed up the initial page loading
  • Enable “Paginate terms” to not show more than 10 terms in the taxonomy filters. If more terms are available, a “Show more” link will display the rest of them
  • Enable the “Hide empty terms” option if you want to hide the terms that are not associated with a product (e.g.: if there are no products with the “black” color in the shop, the black color swatch will be hidden)
  • Enable the “Hide out-of-stock products” option if you want to hide the out-of-stock products from the results
  • Choose if you want to show or not a “Reset filters” button and what position you want to show it in

Customization options

The plugin inherits the theme style for typography, links colors, etc.  

In the Customization tab, you can, anyway, set the color of the following items: 

  • Titles color 
  • Background color 
  • Accent color (the color used to identify the selected terms) 

Need more options? Check the premium features

This version of our plugin works like a charm, but the premium one is an even more powerful tool to increase sales and conversions. By upgrading to the premium version, you can: 

  • Have two additional layouts for the color filter: bicolor and image support (to better represent gradients, textures, patterns…) 
  • Have an additional layout: label/image to upload icons, photos and images to identify terms 
  • Choose whether to show active filters (with an X to remove them) or not, and their position (above products, above or under the filters area) 
  • Have a modal window on mobile: a layout for filters 100% optimized for mobile devices! (Other plugins just add filters after the products list on mobile, yet, this way, product filtering on smartphones and tablets doesn’t work. We are the first ones to have designed and developed a 100% mobile-friendly filtering solution: in a modal window inspired by the largest e-commerce sites!) 
  • Filter by user rating 
  • Filter products by price with a price slider  
  • Filter by price range with unlimited ranges (the last range can show “& above”) 
  • Filter on sale/in-stock products 
  • Use AJAX sorting for products displayed on the page (by rating, price, popularity, latest) 
  • Show an optional tooltip when hovering over terms 
  • Show filters as a toggle (opened or collapsed by default) 
  • Show or hide the count of items 
  • Use adaptive filtering: choose whether the terms that are not available must be hidden (as in the free version) or keep them visible but not clickable (only in premium) 
  • Customize colors and style of the filters through the dedicated “Customization” tab (colors, color swatches size, select and checkbox type, etc.) 
  • Show filters using a horizontal layout
  • NEW! Use variations filtering to make sure that only variable products with variations matching all the selected terms are shown in the set of results