Filter presets

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

It already includes a default preset that you will find after installing and activating the plugin in the section Filter presets.

Default filter preset

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

Filters included in preset

To start creating new presets, click on Add preset.

How to create a new preset

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

Each preset of filters created can be enabled/disabled through the related button and organized by drag&drop.

Enable disable preset

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 creating different filters based on the page on which you want to show them and configure the available options we will analyze below:

Create filters for your preset

Each filter can be shown as a toggle, closed or opened, by activating the option Toggle style.

How to show filter as a toggle

Opened toggle
Opened
Closed toggle
Closed

Taxonomy filter

The taxonomy filter allows configuring filters for categories, tags, attributes, and custom taxonomies. Let’s analyze all the available options.

How to configure taxonomy filter

  • Filter name: type the name that will define the filter;
  • Filter for: select Taxonomy;
  • Choose taxonomy: select the taxonomy 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.

Filter type

  • Filter type: types available are: checkbox, radio, select, text, color swatches, and label/image.

CHECKBOX & TEXT

Checbox and text filters

 

 

 

 

 

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

Taxonomy filter options

  • Order by: you can choose how to sort terms shown in the filter by name, slug, term count, and term order. When selecting Term order, you will also be able to change the position of the terms in Customize terms by drag and drop;
  • Order type: choose the default order for terms from ASC (ascending) and DESC (descending);
  • Show count of items: enable if you want to show the number of items available for each term;
  • 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 no hierarchy with terms in the same level

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

Show no hierarchy with only parent terms

by selecting Yes, with terms collapsed, the hierarchy will show and terms will be collapsed;

Show hierarchy with terms collapsed

by selecting Yes, with terms expanded, the hierarchy will show and terms will be opened;

Show hierarchy with terms expanded

by selecting Yes, without toggles, the hierarchy will show but without toggles.

Show hierarchy without toggles

Based on the selection made in the Order by option, the ordering of the terms will apply level by level starting from parent terms.

Multiple selection when filtering products

  • Allow multiple selection: by enabling this option, users will be able to select multiple terms when filtering products;
  • Multiselect relation: by selecting AND, filter 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.

Adoptive filtering

  • Adoptive filtering: this option allows you to choose to hide terms with no results or show them but without being clickable (see image below), based on the number of products and categories selected.

Adaptive filtering with not clickable terms

 

 

 

 

RADIO

Same options as for Checkbox except for Allow multiple selection and Multiselect relation since radio allows selecting only one option at a time.

Radio filter

 

 

 

 

 

 

 

SELECT

Same options as for Checkbox except for Show hierarchy since it is not possible to show hierarchy structure inside the select body.

Moreover, it adds the option Show search field which, if enabled, shows a search field that allows users to filter product terms directly from the dropdown.

Show search field

Search field in filter dropdown

 

 

COLOR SWATCHES

How to customize color swatches terms

By selecting Color swatches, you will need to enter the number of items per row that you want to show in the option Columns number, then in Customize terms you can add color or image to each term.

Color swatches terms on frontend

LABEL/IMAGE

How to customize label and image filters

By selecting Label/Image, you will need to enter the number of items per row that you want to show in the option Columns number, then in Customize terms you can add an image for each term.

 

Label image terms on frontend

Order by

Filter for Order by

By selecting Order by, you can decide the sorting options to show such as default, popularity, price, rating, latest, etc. by adding them to the option Order options.

Order by filter on frontend

Price range

 

Price ranges filter

By selecting Price range, you will be able to add all the price ranges you want by specifying the minimum and maximum amount or the minimum only and enable the option Show “& above” in last range which allows users to filter prices from the minimum value you have specified to the highest price available.

Filter by price ranges

  • Show count of items: enable if you want to show the number of items available for each term;
  • Adoptive filtering: this option allows you to choose to hide terms or show them but without being clickable, based on the number of products and categories selected.

How to use adoptive filtering

Price slider

Price slider options

 

By selecting Price slider, you will be able to show a slider with a minimum and maximum price value. The available options are the following:

  • Slider min value: insert the minimum value from which the slider must start;
  • Slider max value: insert the maximum value to which the slider must end;
  • Slider step: insert the value for each increment of the slider.

Price slider on frontend

Review filter

 

How to configure review filter

By selecting Review, your users will be able to filter products by customers’ review ratings as shown in the image below.

 

Review filter on frontend

In stock/On sale filter

How to configure In stock and On sale filter

By selecting In stock/On sale, you will give your users the possibility to filter only by discounted and/or available products, therefore excluding those currently out-of-stock.

To filter and show only available products, you must enable the option Show stock filter.
To filter and show only discounted products, you must enable the option Show sale filter.

If you want to show also the number of items available for each term (like in the image below), activate the option Show count of items.

In stock/On sale filter on frontend

General settings

In the tab General settings, you will find all the global options available for your filters. Let’s analyze them together:

How to show Apply filters button

Apply filter button on frontend

  • Filter mode: decide to apply filters in Ajax or show the Apply filter button to get results;

How to show filter results using Ajax

  • Show results:  select if you want to load the results on the same page by using AJAX or load them on a new page;
  • Hide empty terms: enable if you want to hide empty terms from filters section;
  • Hide out of stock products: enable if you want to exclude out-of-stock products from results;
  • 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; (see image below)Reset filters button on frontend
  • Show reset above each filter: enable to show a button above each filter to clear the selection applied;

How to show reset button on each filter

Reset button for filters on frontend

  • Show active filters as labels: enable if you want to show the currently selected filters as labels; it is also possible to remove any active filter;
  • Active filters labels position: choose the position where to show the filter labels;

How to show active filters as labels

Active filter labels on frontend

  • Show titles for active filter labels: enable if you want to show a label for each group of active filters;

How to show titles for active filters

Active filters titles on frontend

  • Scroll to top after filtering: enable if you want the page to automatically scroll up whenever a filter is selected. In this way, your users will always be able to see the list of filtered items starting from the top without missing any product;
  • Show as modal on mobile: enable if you want to show the filter section as a modal on mobile devices to make the filtering easier.

How to show a modal for filter section on mobile devices

 

Filter section modal on mobile Filter section modal on mobile

 

 

Customization

From the tab Customization, you can customize texts, colors and style of the filter options.

How to customize your filters

  • Filters area title: enter the title that will define the “AJAX filter Preset” filter;
  • Filters area colors: choose the color for titles, background, and accent color;
  • Options style: choose the style to apply to filters from Theme style and Custom style;
Theme style
Custom style

 

 

 

 

 

 

  • Color swatch style: choose the style for the thumbnails from Rounded and Square;
  • Color swatch size: enter the size for thumbnails;

How to customize your filters

  • Labels style color: choose the colors for labels background, background hover, background active, text, text hover, text active;
  • Textual terms color: choose the colors for textual terms (text, text hover, text active);
  • AJAX loader: choose the style for the Ajax loader icon from the default one or a custom loader;
  • Custom AJAX loader (available if Upload custom loader is enabled): upload the icon to use as custom loader.

SEO

Options included in the SEO section allow the admin to improve indexing when using filters, both to avoid common problems, such as a 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: Use plugin customized permalinks, Add filters parameters to default URL, or keep the URL unchanged.

By selecting Use plugin customized permalinks, the URL will have a fixed length and will redirect directly to the filtered page. This can be useful, for example, for sharing purposes.

EXAMPLE

By applying filters with the option Use plugin customized permalinks enabled, regardless of the number of filters selected, the URL will be similar to this: https://example.com/shop/filter_session/FCWNQZ3J2H and when visiting this URL, you will find the page just like it was filtered.

Plugin permalink for filtered page

On the contrary, 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