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.

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

To start creating new presets, click on Add preset.

Create a new 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:

New filter options
  • 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;
  • Autopopulate with all terms: by enabling this option, the existing terms belonging to that taxonomy will automatically populate the 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.
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/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.

Checkbox and Text options

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.

Select options
  • 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.

Color swatches options
  • 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.

Label options
  • 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 options

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

General options
  • 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

Blocks

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

Gutenberg blocks

Below you find the list of available YITH blocks and what they are for:

  1. YITH AJAX Filters Preset
  2. YITH Reset Filters Button

Please note: YITH AJAX Filter Preset and YITH Reset Filters Button will be visible only with active filters.

1. YITH AJAX Filters Preset

This block renders the selected preset into any page.

YITH AJAX Filters Preset block

If, for example, we select the “Woman preset”, it will look like the following example:

Filters preset example

2. YITH Reset Filters Button

This block shows the rest filters button when a filter is applied and the button is enabled in the General options of the plugin (you can click here to read more information about the Reset button options).

Reset filters block

This block is useful when the “Reset button position” option won’t work for your product’s loop.

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.