View Product Page

Customization

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

Global options

Customization
  • 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.

Color swatches

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

Labels & text

Label & text
  • 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

Ajax loader
  • 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 the 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 duplicated content and to allow changing URLs used for filters.

SEO
  • 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

If you have chosen to show results on the same by using Ajax through the option Show results in the General options tab, a new option will show.

Show results in the same page
URL permalinks
  • 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

Widget and Shortcode

Widget

The widget YITH AJAX Filters preset allows you to show your preset filters on the sidebars or widget area of standard WooCommerce pages or on any other custom page.

Widget

Shortcodes

To add your presets to your site pages, you can use the shortcodes automatically generated by the plugin after creating your group of filters. Just copy and paste the shortcode to the page on which you want to show the preset.

Shortcodes

The default preset provided by the plugin is [yith_wcan_filters slug=”default-preset”].

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.

YITH Blocks

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

  1. YITH AJAX Filters Preset
  2. YITH Active Filters Labels
  3. YITH Reset Filters Button
  4. YITH Mobile Filters Modal Opener

Please note: YITH AJAX Filter Preset, YITH Active Filters Labels, YITH Reset Filters Button and YITH Mobile Filters Modal Opener will be visible only with active filters.

1. YITH AJAX Filters Preset

This block renders the selected preset into any page.

Filters preset block

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

Filters preset block example

2. YITH Active Filters Labels

This block shows the active filters in current selection as labels within the page.

Active filters block

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

3. 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 button

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

This block shows the button to open filters on a modal when using a mobile device. The content will not show up as a preview, as it only appears at mobile.

Mobile filters modal opener block

You can use this block to place “Mobile filters modal opener” inside a page when “Show as modal on mobile” option won’t work for your product’s loop.

Please note: YITH AJAX Filter Preset, YITH Active Filters Labels, YITH Reset Filters Button and YITH Mobile Filters Modal Opener will be visible only with active filters.

Customize plugin template

To overwrite the plugin template, go to the folder templates in
your plugin and copy the files you find there.

Customize plugin template

Then, paste the copied files into your theme or in the root directory, or
in the folder woocommerce, which you will have to create if it
does not appear there.

Customize plugin template