Through our experience with numerous WooCommerce store owners, we’ve discovered that successful online shops have one important characteristic: they simplify the process for customers to find exactly what they’re looking for.
Major online retailers like Amazon implement filters for categories such as price, color, size, and new arrivals because they recognize how customers prefer to shop.
Implementing product filtering is crucial for expanding an eCommerce business. When customers struggle to find what they need quickly, they are likely to leave without making a purchase.
This is why we developed this comprehensive guide to assist you in integrating effective product filtering into your WooCommerce store.
You will discover how to create filters based on product attributes that enhance navigation and provide a better shopping experience.
The Importance of Filtering WooCommerce Products by Attributes
Filters make it incredibly convenient for customers to explore products in your WooCommerce store.
They enable shoppers to refine their searches based on various attributes such as color, price range, fabric, size, and more.
Instead of scrolling through your entire product lineup, users can focus on the items that interest them.
Incorporating filters can significantly improve user experience, enhance search capabilities, and lower bounce rates in your online store.
Enhancing product visibility allows customers to explore all available options, leading to more informed purchasing decisions and potentially increasing sales.
Now, let’s explore how to effectively filter products in your WooCommerce store. We will guide you through filtering WooCommerce products by both standard attributes and custom attributes.
- Filtering WooCommerce Products by Standard Attributes
- Filtering WooCommerce Products by Custom Attributes
- Additional Tips to Boost Your WooCommerce Sales
Filtering WooCommerce Products by Standard Attributes
For a quick and straightforward method to filter WooCommerce products, this approach is perfect for you. We will demonstrate how to configure a basic filter using a WooCommerce product filter plugin.
Begin by installing and activating the YITH WooCommerce Ajax Product Filter plugin. For detailed instructions, refer to our comprehensive guide on installing a WordPress plugin.
Important Note: A free version of the YITH WooCommerce Ajax Product Filter plugin is available. However, we will be utilizing the premium version, which offers advanced features.
We have extensively tested the plugin on our demo site. For more details about our experience, check out our review of the YITH WooCommerce Ajax Product Filter.
After activating the plugin, navigate to the YITH » Ajax Product Filter section in the WordPress dashboard.
Click the ‘+ Create a new preset’ button to begin setting up a filter preset.
In this section, enter a name for your filter in the ‘Preset name’ field.
Remember, the preset name is for your reference only and will not be visible in your store.
Next, select ‘Horizontal’ as the layout for your preset, then click the ‘+ Add a new filter button’ at the bottom.
If you are using the free version of the plugin, this option will not be available. Instead, you will have the ‘Default’ preset layout.
You can now proceed to create a filter for your WooCommerce products.
How to Create a Filter for WooCommerce Products
Start by entering a name for your filter in the ‘Filter Name’ field.
For example, if you are creating a filter to help customers navigate product categories, you might name it ‘Filter by Category’.
Next, select the filtering parameters from the ‘Filter for’ dropdown menu. Please note that the free version of the plugin only allows filtering by product categories and tags.
To understand the differences between these options, refer to our guide on adding tags, attributes, and categories in WooCommerce.
If you want to create a filter for sorting products by various price ranges, select the ‘Price Range’ option. Likewise, for sorting products by popularity or average rating, choose the ‘Order by’ option.
You can also select the ‘Taxonomy’ option to filter by product tags, categories, colors, sizes, materials, styles, and more. For this tutorial, we will proceed with this option.
After that, choose from the taxonomy options for the filter. For example, if you want to filter products by color, select that option from the dropdown menu.
As we are creating a filter for product categories, we will select the ‘Product Categories’ option.
Next, enter all the product categories available on your website in the ‘Choose terms’ section.
Next, select how you want the filter to appear on your store’s front end using the ‘Filter type’ dropdown menu.
You can present the filter as a checkbox, dropdown menu, text, color swatches, and more. For this guide, we will select the ‘Select’ option to add a dropdown menu.
If you want to include a search box within the dropdown menu, toggle the ‘Show Search Field’ switch to enable it.
You can also set the filter to function as a toggle by activating the ‘Show as toggle’ switch, allowing customers to turn the filter on and off.
After that, select a default order for the filtered terms from the ‘Order by’ dropdown menu. The filter categories will appear in the order you specify.
You can organize the filter categories by name, term count, or slug. Additionally, choose the ‘Order type’ for the filtered terms in either ascending (ASC) or descending (DESC) order.
Finally, click the ‘Save Filter’ button at the bottom to save your filter settings.
Now, repeat this process to create additional filters.
Once you have completed that, return to the top and switch to the ‘General Settings’ tab to adjust some configurations.
Adjust the General Settings.
Begin by selecting a ‘Filter mode’ option. You can choose to apply filters in real-time using AJAX or opt for an ‘Apply Filters’ button on your website.
Next, decide whether to display a save button or show filter results immediately.
After that, choose whether to display the filter results on the same page using AJAX or to reload the results on a new page.
Then, scroll down to the ‘Hide empty terms’ option and enable the switch if you prefer not to show filter terms that have no items.
For example, if you have created a ‘Mugs’ category in your WooCommerce store but it currently contains no products, it will not appear in the ‘Filter by Category’ list.
Next, enable the ‘Hide out of stock products’ option if you do not want to include out-of-stock items in the results.
You can keep the other settings at their default values or adjust them according to your preferences.
Once you have made your selections, click the ‘Save options’ button to apply your changes and navigate to the ‘Customization’ tab at the top.
Set Up the Customization Settings (Premium Plugin Only)
Important:The ‘Customization’ tab is not available in the free version of the plugin.
Here, you can select the color for your WooCommerce filter’s label style, text, swatch size, filter area, and more.
Incorporating colors can enhance the visual appeal of your WooCommerce filter and align it with your e-commerce store’s branding.
After making your selections, click the ‘Save Options’ button and navigate to the ‘SEO‘ tab at the top.
Set Up SEO Settings
Once there, toggle the ‘Enable SEO option’ switch to turn on the settings.
You can now add meta tags from the dropdown menu for your filtered pages, which will enhance your site’s SEO.
For further information, consider reading our article on WordPress metadata and meta tags.
You can also enable the ‘Add “nofollow” to filter anchors’ option to automatically apply the nofollow attribute to all filtered links, instructing search engines to ignore these links when ranking your page.
When you are satisfied, click the ‘Save Options’ button to save your settings.
Integrate the WooCommerce Filter into the Products Page
To incorporate the filters you’ve just created into your WooCommerce products page, navigate to the ‘Filter presets’ tab at the top.
While on that tab, simply copy the shortcode for the filter preset you just created.
Next, open your WooCommerce products page in the block editor from your WordPress dashboard.
Once there, click the Add Block ‘(+)’ button in the top left corner to locate the Shortcode block.
Now, paste the copied filter preset shortcode into the Shortcode block.
Finally, click the ‘Publish’ or ‘Update’ button to save your changes.
You can now visit your WordPress site to see the WooCommerce custom attribute filter in action.
How to Filter WooCommerce Products by Custom Attribute
If you want to create a filter for WooCommerce products using custom attributes, this method is for you.
Create a Custom Attribute
To create a custom attribute, go to theProducts » Attributespage in your WordPress dashboard.
Once there, start by entering a name and slug for your custom taxonomy attribute.
For example, if you want to set up a filter based on a specific product material, you can label the attribute as ‘Filter by Material’.
Next, ensure you check the ‘Enable Archives’ option if you wish to display all products sharing that attribute on a single page.
After that, click the ‘Add Attribute’ button located at the bottom.
Once the attribute is created, click on the ‘Configure Terms’ link to add specific terms to that attribute.
This will take you to a new screen where you need to enter a term in the ‘Name’ field.
For instance, if you created an attribute named ‘Filter by Material,’ you can include individual materials as terms, such as wool. You are free to add as many terms as you wish to an attribute.
When you are finished, click the ‘Add new filter by Material’ button to save the term.
Incorporate the Custom Attribute into a Product
After creating an attribute, you will need to assign it to specific WooCommerce products.
To do this, open the product page you want to edit. Then, scroll down to the ‘Product data’ section and navigate to the ‘Attributes’ tab.
Next, simply expand the ‘Custom Product Attribute’ dropdown menu and select the custom attribute you just created.
Now, click the ‘Add’ button to proceed.
After adding the custom attribute, simply search for the relevant term in the ‘Select Terms’ option.
For example, if you created an attribute for material and the product you are editing is made from wool, select ‘Wool’ from the dropdown menu.
Once you have finished, click the ‘Save attributes’ button.
Then, click the ‘Update’ or ‘Publish’ button at the top to save your changes.
You will need to repeat this process for all products that share the same attribute.
Creating a Custom Attribute Filter Using a Plugin
Next, install and activate the YITH WooCommerce Ajax Product Filter plugin. For detailed instructions, refer to our guide on how to install a WordPress plugin.
Important Note: You can use either the free or premium version of the plugin to create a custom attribute filter for WooCommerce.
After activation, navigate to the YITH » Ajax Product Filter page in your WordPress dashboard.
From this page, click the ‘+ Create a new preset’ button.
Next, enter a name for the preset you are creating in the ‘Preset name’ box.
After completing the setup, click the ‘+ Add a new filter’ button at the bottom to begin creating a custom attribute filter for WooCommerce.
Start by entering a name in the ‘Filter Name’ field.
For instance, if you are setting up a filter to help customers sort by material options, you might name it ‘Material Filter’.
Next, select ‘Taxonomy’ from the ‘Filter for’ dropdown menu. If you are using the free version of the plugin, this option will be automatically selected for you.
The custom attribute you created will now be available in the dropdown menu next to the ‘Choose taxonomy’ option.
Select the custom attribute from the dropdown list and enter the attribute terms in the ‘Choose terms’ field.
Then, decide how you want the filter to appear on the front end of your store by selecting an option from the ‘Filter type’ dropdown menu.
The filter can be displayed in various formats, including checkboxes, dropdown menus, text fields, color swatches, and more.
Once you’ve made your selections, choose a default sorting order for the filtered terms from the ‘Order by’ dropdown menu.
You can organize the filter categories by name, term count, or slug. Additionally, you can choose the ‘Order type’ for the filtered terms in either ascending (ASC) or descending (DESC) order.
Finally, click the ‘Save Filter’ button at the bottom to save your custom attribute filter settings.
Next, navigate to the ‘General Settings’ tab at the top. Here, you can select a filter mode, hide empty terms, and adjust other settings to fit your requirements.
Once you have completed your adjustments, click the ‘Save options’ button to apply your changes and then switch to the ‘Customization’ tab at the top.
Important Note: If you are using the free version, these customization options will not be accessible.
From this section, you can personalize how your filter preset appears on the front end of your website.
For example, you can select the label style color, text term color, color swatch size, filter area color, and more.
After making your selections, click the ‘Save Options’ button and then switch to the ‘SEO’ tab at the top.
From this section, toggle the ‘Enable SEO option’ switch to activate the SEO settings.
You can add robots meta tags from the dropdown menu to apply to your filtered pages, enhancing your site’s SEO.
You can enable the ‘Add “nofollow” to filter anchors’ option to automatically apply the nofollow attribute to all filter links.
Once you’re happy with the changes, click the ‘Save Options’ button to save your settings.
Integrate the Custom Attribute Filter into Your WooCommerce Products Page
To incorporate the custom attribute filter on your WooCommerce shop page, navigate to the ‘Filter presets’ tab at the top.
From this tab, copy the shortcode for the custom attribute filter.
Next, access your products page using the block editor from the WordPress admin sidebar.
Here, click the Add Block ‘(+)’ button in the top left corner to insert the Shortcode block.
Then, simply paste the copied filter preset shortcode into the block.
Finally, click the ‘Publish’ or ‘Update’ button to apply your changes.
You can now visit your website to see the WooCommerce custom attribute filter in action.
Additional Tips to Boost WooCommerce Sales
In addition to adding search filters, enhancing your website’s speed is another effective way to increase conversions in your online store.
A WooCommerce store that loads quickly can better retain customers and generate more leads.
To enhance your store’s loading speed, we suggest switching to SiteGround. This hosting provider is recommended by WooCommerce, ensuring your website runs quickly and efficiently, featuring Ultrafast PHP, e-commerce caching, and more.
Another effective strategy is to implement caching on your WooCommerce store.
Caching is a method that temporarily stores your website data to enhance performance. You can utilize top-rated WooCommerce caching plugins to boost your site’s speed.
Additionally, consider optimizing your product images, selecting a faster-loading WooCommerce theme, using the latest PHP version, enabling a DNS-level firewall, and more to enhance the customer experience.
For comprehensive guidance, refer to our beginner’s guide on accelerating WooCommerce performance.
We hope this article has helped you understand how to filter WooCommerce products by attributes and custom attributes. You may also be interested in our article on offering shipping discounts in WooCommerce and our curated list of the best WooCommerce themes.
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
