Configuring the YITH WooCommerce Ajax Product Filter Plugin

Last Updated on

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.

x
Note: The plugin works only on WooCommerce archive pages. By inserting widgets onto different pages you won’t achieve any result.

In this article


Installing the Plugin

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

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

yith

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

yith

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

yith


Configuring the Plugin

x
Note: If you are not familiar with configuring a shop page with products, read the Configuring WooCommerce article.
1
From the WordPress left menu, go to the YITH Plugins > Ajax Product Filter page.

yith

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

yith

3
Configure 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 byChoose between Alphabetically and Woocommerce default.

4
Custom 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

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

yith

2
Under the Add New Attributes option, configure the values as follows 
Options Value
NameEnter the name of the attribute.
SlugInsert a unique slug/reference for the attribute
Enable Archives?Determine whether or not to enable the archive page.
TypeAvailable options are Text and Select. Text allows manual entry whereas Select allows preconfigured terms in a dropdown list.
Default sort orderDetermines 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.

x
Note: Deleting a term will remove it from all products and variations to which it has been assigned. Recreating a term will not automatically assign it back to the products.
1
Configure the settings as follows.
Options Values
NameThe name is how it appears on your site.
SlugThe “slug” is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens.
DescriptionAdds a description for the term.
2
Create multiple slugs following the table in the step 1.

Adding Attributes to Products

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

yith

2
Hover over a product and click on Edit.

yith

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

yith

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

Configuring the Ajax Product Filter Widget

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

yith

2
From the available widgets panel, add the YITH WooCommerce Ajax Product Filter widget to one of the widget areas in the right panel.
3
Expand the YITH WooCommerce Ajax Product Filter widget to configure the settings.
4
Configure the settings as described.
Options Values
NameEnter the title of the widget.
TypeDefines the type of the filter. Available options are: List, Color, Label, and Dropdown
Query typeDefines the type of query to apply to the widget when it is added twice in the same sidebar. Available options are AND and OR
AttributesDefines the product attribute to display (out of those created in Products > Attributes).
DisplayDefines whether or not to display hierarchically. Available options are: All (not hierarchical), All (hierarchical) and Only parents.
5
Save the widget.

Type Options

1
Configure the options as follows
Options Values
ListShows the list of attributes belonging to the selected type in the option “Attribute”
ColorEnables the list of color boxes associated to each element of the selected attribute in the option “Attribute”
LabelList of labels associated to each attribute value selected in the option “Attribute”
DropdownSelect 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.
Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket