View Product Page

Filter presets

The plugin allows the creation of unlimited groups of filters (presets) that you can show on different product and category pages or custom pages.

If it’s the first time you install and activate the plugin, it will include a default preset that you will find in the section Filter presets.

Default preset

This preset includes filters whose settings can be changed according to your needs.

Default preset filters

To start creating new presets, click on Add preset.

How to create a new filter preset

For each preset you create, you can insert a title to easily identify it when checking the list.

You can then start choosing the filters to include by clicking on the button Add new filters in the section Filters of this preset.
This allows the creation of different filters based on the page on which you want to show them and configure the available options we will analyze below:

How to configure new filters

  • Filter name: type the name that will define the filter;
  • Choose taxonomy: select the taxonomy (among attributes, tags or categories) that will be applied to this filter;
  • Choose terms: based on the taxonomy selected, you will be able to add the terms to be used for filtering. In the image above, we have used product categories.

Select filter type

  • Filter type: types available are: checkbox,  selecttextcolor swatches, and label.

Each preset of filters created can be enabled/disabled through the related button.

Enable or disable presets

Checkbox and Text

By selecting Checkbox or Text,  you will have the possibility to customize each term label and tooltip through the option Customize terms.

Filter type - Checkbox and Text

Other available options are:

  • Show hierarchy: this ordering applies to hierarchical taxonomy levels. By selecting No, show all terms in same level, the hierarchy won’t show and only the terms in the same level will;

Show terms of the same level

by selecting No, show only parent terms, the hierarchy won’t show and only the parent terms will;

Show only parent terms

by selecting Yes, the hierarchy will show;

Show hierarchy

  • Allow multiple selection: by enabling this option, users will be able to select multiple terms when filtering products;
  • Multiselect relation: by selecting ANDfilter results will show only if all selected terms match at the same time; by selecting OR, filter results will show only if at least one of the selected terms matches.

Select

By choosing Select,  you will have the possibility to customize each term label and tooltip through the option Customize terms.

Filter type - Select

  • Allow multiple selection: by enabling this option, users will be able to select multiple terms when filtering products;
  • Multiselect relation: by selecting ANDfilter results will show only if all selected terms match at the same time; by selecting OR, filter results will show only if at least one of the selected terms matches.

Select type on frontend

 

Color swatches

By selecting Color swatches,  you will have the possibility to customize each term label and tooltip through the option Customize terms. In addition to that, you will be able to set a color for each term.

Filter type - Color swatches

  • Allow multiple selection: by enabling this option, users will be able to select multiple terms when filtering products;
  • Multiselect relation: by selecting ANDfilter results will show only if all selected terms match at the same time; by selecting OR, filter results will show only if at least one of the selected terms matches.

Color swatches on frontend

Label

By selecting Label,  you will have the possibility to customize each term label and tooltip through the option Customize terms.

Filter type - Label

  • Allow multiple selection: by enabling this option, users will be able to select multiple terms when filtering products;
  • Multiselect relation: by selecting ANDfilter results will show only if all selected terms match at the same time; by selecting OR, filter results will show only if at least one of the selected terms matches.

Filter type Label on frontend

General settings

In the tab General settings, you will find the global options available for your filters.

Ajax product filter free version - General settings

  • Show reset button: enable if you want to show a Reset filters button to let users quickly reset the selections applied; (see image below)
  • Reset button position: choose the position where to show the Reset filters button (Before filters, After filters or Above products list)

Reset filters button position

SEO

Options included in the SEO section allow the admin to improve indexing when using filters, both to avoid common problems, such as duplicated content and to allow changing URLs used for filters.

SEO options

    • Enable SEO option: enable to make the meta tag “robots” appear in the tag <head> of the page, in case there is an active filter;
    • Meta tag: select which tag to use on filtered pages by choosing from disabled; noindex,nofollow; noindex,follow; index, nofollow and index,follow;
    • Add “nofollow” to filter anchors: enable if you want to add the attribute

      rel=”nofollow” to all the filter anchors across the plugin;

    • URL permalinks: choose how to manage the page permalinks from: Add filters parameters to default URLor keep the URL unchanged. By applying filters with the option Add filters parameters to default URL, the filtered page will have an URL similar to this: https://example.com/shop/?yith_wcan=1&product_cat=accessories&filter_color=black&query_type_color=or&filter_materials=leather&query_type_materials=or

 

Elementor

There are two widgets you can add to your product templates including the following:

  • YITH AJAX Filters Preset: it adds any preset of filters by selecting it in the dedicated field;

Elementor-Ajax Filter Preset

  • YITH AJAX Filters Reset Button: it shows the Reset filters button if a filter is applied and the button is enabled in plugin settings;

Elementor-AJAX Filters Reset Button

Gutenberg

The plugin is ready to use with the new Gutenberg editor. When creating a new post or page, you will be able to find our YITH shortcodes and widgets. With a simple click, they will be added to your page.

Gutenberg blocks for Ajax Product Filter

Gutenberg filter blocks on frontend

Widget and general settings

Search filters can be inserted only through YITH WooCommerce Ajax Product Filter widget.
Scroll page content to find out about how to set up widget correctly and fix potential issues caused by template changes that your theme may generate in WooCommerce “Shop” page.

Pay attention: the plugin works only in WooCommerce pages. We suggest you not to use it on different pages.