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.
Note: 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.
2Search for YITH WooCommerce Ajax Product Filter and click on the Install Now button.
3After the installation process, click on the Activate button.
Configuring the Plugin
Note: If you are not familiar with configuring a shop page with products, read the Configuring WooCommerce article.
1From the WordPress left menu, go to the YITH Plugins > Ajax Product Filter page.
2There are three tabs on this page. Click on Front End.
3Configure the settings as follows.
| Options | Value |
|---|---|
| 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.
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.
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.
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.
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.
2Hover over a product and click on Edit.
3On the product editor page scroll down to find the Product data section and click on the Attribute tab from the left.
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.
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.
