Loading...

Knowledge Base
Save up to  70% off.  Start your website today!

YITH WooCommerce AJAX Product Filter

Overview

The YITH WooCommerce AJAX Product Filter plugin allows you to create unlimited filters to help your customers quickly find the products they are looking for.

The plugin works with the product categories, the product tags, and the product attributes. 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/attribute.

For example, to create a “Filter by color” option you have to create the “Color” attribute in Product > Attributes, set the values (black, white, red… all the different colors), and then, associate each product to the right color.

Read more about how to create attributes in WooCommerce




How to create a preset of filters

  1. In the Filter presets tab, you can edit the default preset included in the plugin or click on the Add preset button to create a new one.
    yith-add-preset
  2. Enter a name to identify the preset. For example: “Shop filters”.
  3. Click on the Add a new filter button to start adding filters to the preset.
    yith-addnew-filter-preset
  4. Enter a name to identify the filter. For example: “Filter by color”.
  5. Choose the taxonomy to use for filters. 

    Note: If you don’t have custom attributes created, you will only see Product categories and Product tags to select. To create a filter by color, size, material, etc., you have to create these attributes first in Products > Attributes. Then you will also see those attributes in the select list.

    yith-enter-name-taxonomy
  6. Choose if you want to automatically populate the filters with all the terms. In 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.
    yith-auto-populate
  7. 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.
    yith-choose-terms
  8. Choose the 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.
    yith-filter-type-color-swatches
  9. Choose the label position - you can hide the color label and only show the color swatches, or set the position of the text.
    yith-labels
  10. Choose how many columns to show per row - If you have 8 colors and you want to show 4 color swatches per row, enter “4”.
    yith-columns-number
  11. Customize the terms to show - You can customize the label, set a tooltip, and use the color picker to set the color to show in the color swatch.
    yith-terms-options
  12. Choose 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 disabled, when the user clicks on the second color swatch to select it, the first color will be deselected.
  13. If the option multiple selection is 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, 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.
    yith-selection-relation
  14. Save the filter and then save the preset. - The first filter of the preset is ready! You can now add other filters following the same steps.


How to insert 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.
    yith-filters-preset-block
  2. You can also insert the preset shortcode on the page, where you want to show the filters.
    yith-shortcode

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, anyway, set some colors:

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


Need more options? Check the premium features:

This version of our plugin works like a charm, but the premium one is an even 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…
  • Have an additional layout - label/image to upload icons, photos, and images to identify terms
  • Choose whether to show active filters (with an X to remove them) or not, and their position (above products, above or under the filters area)
  • Have a modal window on mobile: a layout for filters 100% optimized for mobile devices! - Other plugins just add filters after the products list on mobile, yet, 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: in 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 on terms
  • Show filters as a toggle - opened or collapsed by default
  • Show or hide the count of items
  • Use adaptive filtering - 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 Bluehost. To know more about this and/or to purchase the premium version of this plugin, please visit YITH's website.

If you need further assistance, feel free to contact us via Chat or Phone:

  • Chat Support - While on our website, you should see a CHAT bubble in the bottom right-hand corner of the page. Click anywhere on the bubble to begin a chat session.
  • Phone Support -
    • US: 888-401-4678
    • International: +1 801-765-9400

You may also refer to our Knowledge Base articles to help answer common questions and guide you through various setup, configuration, and troubleshooting steps.

Did you find this article helpful?

 
* Your feedback is too short

Loading...