YITH WooCommerce AJAX Product Filter

The YITH WooCommerce AJAX Product Filter plugin allows you to create unlimited search filters to help your customers find your products faster. It filters product categories, tags, and attributes for a more efficient search on your website.

Table of Contents

1. Creating a Preset of Filters
2. Inserting the Filters Preset on the Shop Page
3. General Settings
4. Customization Options
5. Premium Features

Creating a Preset of Filters

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, or attribute. For example, to create a “Filter by color” option, you have to create the “Color” attribute.

To do this, go to the Product menu, then Attributes. From there, set the values (black, white, red, etc.) and associate each product with the right color. Once done, proceed with the following steps to create a preset of filters.

1. Go to your YITH menu and click AJAX Product Filter.
2. In the Filter Presets tab, you can click Add preset to create a new preset or edit a default preset included in the plugin.



3. Enter a Preset name to identify the preset, then click Add a new filter to start adding filters to the preset.



4. Enter a Filter name to identify the filter, then click the Choose taxonomy dropdown to select the category to use for your filter.




NOTE: If you did not create custom attributes, you will only see Product categories and Product tags in the dropdown. To create a filter by color, size, material, etc., create these attributes first by going to the Products menu, then Attributes. Once done, you will see these attributes in the dropdown list.



5. Turn on Auto-populate with all terms.




NOTE: Enabling this option will automatically populate your created terms. 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.

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




6. Under Filter type, 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.



7. For Labels, you can hide the color label and only show the color swatches, or set the position of the text.



8. In Columns number, choose how many columns you want to show per row. For instance, if you have 8 colors and you want to show 4 color swatches per row, then enter 4.



9. In Terms options, customize the terms you want to show. Edit the label, set a tooltip, and use the color picker to set the color for the color swatch.



10. Turn on Allow multiple selection if you want to allow users to select multiple options or not.

If enabled, the user can select two different colors. For example: red and black. If enabled, you can choose how to use the filter in this case. 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, and 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.

If disabled, when the user clicks on the second color swatch to select it, the first color will be deselected.

11. Save the filter and then save the preset. The first filter of the preset is ready, and you can now add other filters following the same steps.

Inserting 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.



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.

General Settings

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

• The Filter 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.

Customization Options

The plugin inherits the theme style for typography, links colors, etc. In the Customization tab, you can set some colors for the following options:

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

Need more options? Check the premium features:

This plugin works like a charm, but the premium one is a 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, etc.
• Have an additional layout to upload labels, icons, photos, and images to identify terms.
• Choose whether to show active filters or not, and position them above products or under the filters area.
• Have a modal window on mobile, a layout for filters that is 100% optimized for mobile devices. Other plugins just add filters after the product lists on mobile. But 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 through 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, and 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 to 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.
• NEW! Show filters using a horizontal layout

These Premium Features are Coming Soon on Crazy Domains. To know more or to purchase the premium version of this plugin, visit YITH's website.