Configuring the YITH WooCommerce Ajax Product Filter Plugin

Updated on September 22, 2017

With the YITH WooCommerce Ajax Product Filter you can simplify the product search in your shop. Thanks to widgets, you can easily set up search filters that allow users to quickly find the products they are interested in.
Remember that the plugin works only on WooCommerce archive pages. By inserting widgets onto different pages you won’t achieve any result.


Installing the Plugin

To install the free version of the YITH WooCommerce Ajax Product Filter plugin:

1From the WordPress left menu, go to Plugins > Add New page.

yith

2Search for YITH WooCommerce Ajax Product Filter and click on the Install Now button.

yith

3After the installation process, click on the Activate button.

yith


Configuring the Plugin

1From the WordPress left menu, go to the YITH Plugins > Ajax Product Filter page.

yith

2There are three tabs on this page. Click on Front End.

yith

3Configure the settings as follows.
OptionsValue

Product Container  .Product
Shop Pagination Container  nav.woocommerce-pagination
Result Count Container .woocommerce-result-count
Scroll top anchor  .yit-wcan-container
Order by Choose between Alphabetically and Woocommerce default.

4Custom CSS can be inserted in the Custom Style tab. 

yith


Configuring Attributes

The YITH WooCommerce Ajax Product Filter widget works with attributes configured in Products -> Attributes. So before the filter widget is added on the sidebar, you’ll need to verify that your shop and product attributes have been set up.

Adding an attribute

1From the WordPress left menu, go to Products > Attributes. 

yith

2Under the Add New Attributes option, configure the values as follows 
Options Value

Name Enter the name of the attribute.
Slug Insert a unique slug/reference for the attribute
Enable Archives? Determine whether or not to enable the archive page.
Type Available options are Text and Select. Text allows manual entry whereas Select allows preconfigured terms in a dropdown list.
Default sort order Determines the sort order of the terms on the front end shop product pages. Available options are: Custom Ordering, Name, Name(numeric), and Term ID

Configure the Terms

Attribute terms can be assigned to products and variations.

1Configure the settings as follows.
Options Values

Name The name is how it appears on your site.
Slug The “slug” is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens.
Description Adds a description for the term.
2Create multiple slugs following the table in the step 1.

Adding Attributes to Products

1From the WordPress left menu, go to the Products page

yith

2Hover over a product and click on Edit.

yith

3On the product editor page scroll down to find the Product data section and click on the Attribute tab from the left.

yith

4Select an attribute from the Custom Product Attributes dropdown option and click on the Add button.
5Insert terms separated by the delimiter ‘|’ in the value option opposite to the added attributes.

Configuring the Ajax Product Filter Widget

1From the WordPress left menu, go to Appearance > Widget page

yith

2From the available widgets panel, add the YITH WooCommerce Ajax Product Filter widget to one of the widget areas in the right panel.
3Expand the YITH WooCommerce Ajax Product Filter widget to configure the settings.
4Configure the settings as described.
Options Values

Name Enter the title of the widget.
Type Defines the type of the filter. Available options are: List, Color, Label, and Dropdown
Query type Defines the type of query to apply to the widget when it is added twice in the same sidebar. Available options are AND and OR
Attributes Defines the product attribute to display (out of those created in Products > Attributes).
Display Defines whether or not to display hierarchically. Available options are: All (not hierarchical), All (hierarchical) and Only parents.
5Save the widget.

Type Options

1Configure the options as follows
Options Values

List Shows the list of attributes belonging to the selected type in the option “Attribute”
Color Enables the list of color boxes associated to each element of the selected attribute in the option “Attribute”
Label List of labels associated to each attribute value selected in the option “Attribute”
Dropdown Select menu that shows all values of the attribute selected in the option “Attribute”

Query Type Option

This option defines the type of query to apply to the widget when it is added twice in the same sidebar, giving users the ability to apply different filters at the same time:

  • AND: shows only products that satisfy both conditions set by the user through filters applied;
  • OR: search returns all products that satisfy at least one of the conditions set by the user through the filter applied.
Did this answer your question?