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.
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.
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).
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).
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.
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.
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.
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”.
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.
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
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.
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.
2- You can also insert the preset shortcode on the page, where you want to show the filters.
You can follow this procedure to show filters on any custom page.
In the General settings tab, you can find some options to customize the way the plugin works.
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
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
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.)
