50% DISCOUNT on ALL Artbees Themes This Valentine Season, from Feb 14 till Feb 21 | Get yours now!
Last Updated on
Friday, September 22, 2017
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. In this article Installing the Plugin
To install the free version of the
YITH WooCommerce Ajax Product Filter plugin:
From the WordPress left menu, go to Plugins > Add New page.
Search for YITH WooCommerce Ajax Product Filter and click on the Install Now button.
After the installation process, click on the Activate button. Configuring the Plugin
From the WordPress left menu, go to the YITH Plugins > Ajax Product Filter page.
There are three tabs on this page. Click on Front End.
Configure 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.
Custom CSS can be inserted in the Custom Style tab. Configuring Attributes
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
From the WordPress left menu, go to Products > Attributes.
Under 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.
Configure 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.
Create multiple slugs following the table in the step 1. Adding Attributes to Products
From the WordPress left menu, go to the Products page .
Hover over a product and click on Edit.
On the product editor page scroll down to find the Product data section and click on the Attribute tab from the left.
Select an attribute from the Custom Product Attributes dropdown option and click on the Add button.
Insert terms separated by the delimiter ‘|’ in the value option opposite to the added attributes.
From the WordPress left menu, go to Appearance > Widget page .
From the available widgets panel, add the YITH WooCommerce Ajax Product Filter widget to one of the widget areas in the right panel.
Expand the YITH WooCommerce Ajax Product Filter widget to configure the settings.
Configure 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. Type Options
Configure 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. Was this helpful?
You can vote again after 1 hour
Need custom services? Hire us and have your coffee! PSD 2 WordPress. Content Management. Custom coding.