What will happen to your store if visitors have difficulties finding the exact item they want? Online shoppers spend little time looking for something in one place, especially when you haven’t been a famous brand. Therefore, they may leave your store when it takes them lots of time to find their desired products.
If you don’t sell numerous types of products, this problem may not occur. But when the store sells tens, hundreds, or thousands of items, it is essential to organize them according to certain standards so that visitors can find them quickly. Besides, product filtering is a necessary step to help visitors approach their favorite items quickly and easily, thus improving customer experience and boosting sales.
That’s why WooCommerce Ajax product filters are present in this article.
As a store owner, you want to know how to create product filters for your WooCommerce store. Please keep reading to explore the way. We also introduce you to a powerful tool, Woostify Smart Product Filter, which helps you cover this task perfectly.
Table of Contents
What are WooCommerce product filters?
WooCommerce store owners will use product filters to optimize the search process in their stores. Based on products’ features and customers’ demands, the filter tool will separate your products into different criteria such as sizes, colors, brands, and prices.
When visitors use the filters for their search, the result will display only the items matching their criteria. Meanwhile, other products that don’t include the features selected will be removed. For example, you have a product filter by color. If visitors want to buy white jeans, they will select the “white” attribute from the filter. Then, the page will show only white jeans while jeans with other colors will be hidden in the store search result.
The smarter product filters are, the more satisfied customers feel with the results offered. After that, they will quickly get the items they need, add them to the cart, and finally create sales for you.
Product filters are so helpful but they don’t suit all types of businesses. It is ideal for the store selling a large number of products with various attributes such as colors, sizes, materials, and brands. But if your store is on a small scale and sells only a few products, it is not necessary to apply this feature.
Why are Product Filters Important to Your Store?
When your store has a large product catalog, it is necessary to find a way to help customers approach the exact item they are looking for. It is time for you to utilize product filters that’ll bring quite a few benefits. Let’s see which benefits you’ll gain when creating product filters for your store.
Improve Navigation
Of countless product pages of the store, how can you take visitors to the product they are seeking? With product filters, they will easily navigate between the shop page/category pages and product pages. When customers use the filter tool to take the selection criteria for their desired products, a list of items matching their demands will be displayed. If the search results created by the filter meet their requirements, they will visit the products and perhaps make a purchase.
Boost Product Visibility
Your store has several high-quality but less popular items. To promote them, you will want to boost their visibility to make them approach more customers. In this case, product filters can help you a lot. When setting up the filter, you can create special attributes for those items. Then, when potential customers filter products by these attributes, the products you want to promote will appear in front of the eyes of customers.
Increase User Experience
Not all visitors want to see the whole store and discover dozens or hundreds of items. Many of them will want to find a specific item in your store. A product filter will narrow their product search, thus saving time finding their wanted items. If you can set up an effective product filter, you will bring great satisfaction to customers. From there, they will stay longer in your store. This is a good chance to promote other products. Besides, when your store leaves them with a good impression, they’re likely to come back to the store to purchase more next time.
WooCommerce Default Product Filters
By default, WooCommerce provides you with product filter widgets. With some simple steps below, you can add them to the sidebar of your store.
Depending on each theme used, the dashboard interface will be a bit different. Here we’ll set up default product filters with the Woostify theme.
First, you go to Appearance > Widgets. Next, click on the + icon next to Widgets to show a list of widgets. You will find five product filter widgets here, including Filter by Price, Filter by Stock, Filter by Attribute, Filter by Rating, and Active Product Filters.
You can set up the filters for WooCommerce Sidebar. Then, the filters will appear on the sidebar of the shop/product page.
When you want to add any filter to the sidebar, you simply click on the + icon next to Widgets and select the widget.
Next, to have the filters displayed as you want in the front end, you go to Customize > Layout > Sidebar and take an option at Shop/Product Archive. Here we choose Left sidebar to display these filters.
Now, you’ll see how the filters display and work on the left sidebar.
As you can see, it takes you just around one minute to add default filter widgets to your WooCommerce store. However, there are some limitations when you use this default feature.
First, the Ajax feature is not supported; therefore, the page will reload after any filter is applied, affecting your site performance.
Second, WooCommerce default offers a few options for product filtering, which may not be able to meet all the needs of customers.
Besides, there are not many custom options to make these filters more appealing or more suitable for your products. In particular, Filter by attribute will be displayed in a checkbox list while Filter by Price will be a slider as shown in the image above.
Therefore, to get advanced filters with more custom options and the support of Ajax technology, you will need a professional product filter tool.
It’s time for Smart Product Filter to come in. It is an advanced feature offered by the Woostify theme. Please keep reading to learn more about this powerful filter tool.diss
Best AJAX Product Filter Plugin – Woostify Smart Product Filter
Compared with default filter widgets, Smart Product Filter gives you more options to create new filters and customize them.
Multiple product filter types
There are over 10 types of filters for you to select. Based on them, you can create product filters by various criteria such as attributes, categories, tags, prices, dates, orders, and other product data.
We’ll let you see how to add new filters in the following part of the article.
Two layouts for filters
While the default WooCommerce only allows displaying filters on the sidebar, this add-on provides users with two layouts, including vertical and horizontal ones.
Besides, the Woostify team offers a display option for mobile optimization. It is estimated that up to 76% of American adults shop on smartphones. Grabbing this point, To get how to do it, please check the part of How to optimize product filters on mobile.
AJAX loading feature
Smart Product Filter is seen as a great WooCommerce AJAX product filter. It makes your filter system responsive and user-friendly with AJAX loading functionality. When customers take more filtering options, the existing page won’t refresh. This feature is well suited for large stores that sell many variable products. Then, Ajax loading helps bring your customers a better shopping experience.
If you customize your shop page with Elementor instead of using the default shop page, Smart Product Filter also supports setting up filters. In the part on How to set up WooCommerce Product Filter with Elementor, we’ll instruct you with specific steps.
We’ve provided an overview of interesting features of Smart Product Filter. Right now, you may be excited to know how to use the add-on. In the next parts, we will show you how to:
- Set up Smart Product Filter
- Set up a horizontal layout for product filters
- Set up WooCommerce product filter with Elementor
- Optimize Product Filters on Mobile
Our video guide on using Smart Product Filter
Here is our video on how to set up WooCommerce ajax product filters. Hope that the detailed steps will help you easily create a product filter system for your store. You also can refer to our Smart Product Filter doc to understand how the add-on is configured.
To deeply understand the benefits of every feature, please keep reading. We’ll analyze them in each step.
How to Set up Woostify Smart Product Filter
To set up Smart Product Filter, you’ll go through the 4 steps below:
Step 1: Enable Smart Product Filter
In the WooCommerce dashboard, go to Woostify options > Smart Product Filter and click on Activate to enable the add-on. Then, navigate to the add-on to create product filters.
Woostify Smart Product FilterStep 2: Add new filters
The add-on offers many options and allows you to add countless filters. First, to create new filters, hit Add New Filter.
In the Add New Post tab, you add a title and complete the settings, including:
- Filter Label: this is the filter name displayed in the front end.
- Filter Type: it will decide how the filters work.
- Soft Limit + Total: the filter type you choose will decide whether these two sections will display or not.
In the Filter Type section, there are up to 10 options for you to select. For each filter type, the next setup will display differently. Depending on your products’ characteristics, you will decide how many and which filters are set for your store.
For example, we select the Search filter type. Then, the Search Placeholder section will appear. You will fill the box with text like Type to search, Search products, or Search items here. If we choose Select filter type, a list of sections including Data source, Total, Condition, and Sort by will display.
After covering the settings, hit the Publish button to have new product filters saved.
Below are 9 filters we added for the store.
Step 3: Customize Woostify Product Filters
After having product filters, you continue to create basic settings for them.
In the Settings part, there are two sections for you to cover, including General and Style.
Go to the General section to:
- Set the layout as Horizontal or Vertical: Here we’ll select the vertical layout. To make your product filters display with a horizontal layout, you will have to take another step.
- Set shortcode automatically as woostify_product_filter. You’ll insert this shortcode into the place where you want to add product filters.
- Exclude all out-of-stock items from the search result that is shown after customers apply product filters.
- Index Data to update all product data in your store for the add-on. Right after the data is indexed successfully, Last Update will be changed to the updated moment, while Total Product Index will show the total number of products filters are applied to.
Now, move to the Style section to edit all the options below:
Cu- Enable Active Filter Button: This button allows viewing all filters currently applied. It helps customers check which filters they are using.
- Collapse Enabled: The collapse option allows showing or hiding the content for each filter.
- Scroll Enabled: You can use scrolling for the filters with a long vertical list of options. Besides, the add-on lets you customize Scroll Height.
- Item Count: the number of items for each checkbox filter. You also can set Item Count Color.
Next, to make your filters more appealing to your customers, the add-on provides users with numerous customization options. You can change the sizes and colors of the sections below. For the one applied for the filters you didn’t create in step 3, simply ignore them.
- Active Filter
- Filter Title
- Text
- Button
- Checkboxes
- Radio
- Input
- Range Slider
- Visual
After completing the settings in the General and Style sections, you click on Save to update all the changes.
Step 4: Add Product Filter to the WooCommerce sidebar
As mentioned above, you need to add the product filter shortcode to the place you want to display the filters. Then, the first step is to copy the shortcode.
Next, in the WooCommerce dashboard, you go to Appearance > Widgets.
If you choose to add the shortcode to the Main Sidebar, your filters will appear in the sidebar of all the pages throughout the website. But as usual, store owners will want to have them on the shop page. To do that, you will go to WooCommerce Sidebar to add the shortcode.
After going to WooCommerce Sidebar, click on the + icon, search for the Shortcode from the list of widgets, and paste the copied shortcode into the box as in the image.
Now, you can visit the shop page to check how product filters display on your WooCommerce store.
How to set up a horizontal layout for product filters
With the four steps above, you will have product filters displayed on the right or left sidebar of the shop page. In other words, they are set in a vertical layout.
So to have horizontal filters, what do you need to do?
Please follow the guide we present below to know how to do it.
Step 1: Enable Horizontal Layout for Smart Product Filter
In the General section, you change the layout to Horizontal and Save the change.
With this step, you will have product filters with a horizontal layout as in the image below. But the shop page and these filters will be more eye-catching when you remove the sidebar.
Step 2: Turn off the sidebar on the shop page
Sidebars are important to WooCommerce stores. That being said, if you want to display content (product filters) in the horizontal layout, sidebars are no longer necessary.
To remove the sidebar from the shop page, you go to Appearance > Customize.
After being taken to the customizer interface, you go to the shop page and select Layout > Sidebar. Then, select No sidebar for Shop/ Product Archive. As you edit it, the Live Preview of the customizer will let you see how product filters change.
Now, check how the shop page displays on the front end.
Smart Product Filter horizontal layout
As you can see, because we have hidden the sidebar, the white space on the left side is removed. Instead, the products together with filters are in a horizontal layout and cover the full screen. With this design, you won’t see specific options for each filter. Dropdown icons will come in. Please click them to see the filters in detail.
We’ve completed the process of adding and customizing product filters to the default shop page. So with a custom shop, how can we do this?
How to set up WooCommerce Product Filter with Elementor
Woostify allows customizing the shop page with Elementor. It also provides users with the option to add product filters to the custom page. So now, please keep reading to see how to complete this task.
Step 1: Create a custom shop page
First, you need to go to Woostify Options and activate WooBuilder.
Then, go to WooBuilder to create a new WooCommerce shop page. Select the Shop Page type, name the template, and CREATE TEMPLATE.
Now, you can customize the shop page with Elementor. Here we’ll drop and drop the Woostify – Products widget to build a basic shop page. There are many other widgets to design the shop page. To explore more, please read the article on how to customize WooCommerce shop page.
Step 2: Add product filters to the Elementor Shop Page
To make product filters display on this custom shop page, you’ll follow the steps below:
- Turn on the Enable Active Filter Button: its function is similar to the one in the General section of Settings when you set it for the default shop page. Check here to see if you’re unclear about its function.
- Next, in the Query section, select Current Query to apply product filters to all products on the existing page.
- In the Elementor widget panel, search for the Shortcode widget, and drag and drop it to the page editor. You can put it above the Active Filter button.
- Copy the Filter global shortcode [woostify_product_filter] and paste it in the shortcode box. Then, you’ll have a filter layout placed horizontally as shown in the image.
- To create a vertical layout for Elementor product filters, you select the two-column structure:
Drag and drop the Woostify – Products widget to either of the columns. Then, you also Enable Active Filter Button and select the Current Query as you set for the [horizontal layout in Elementor]. The product filter shortcode will be added to the remaining column.
After that, you also need to go to the General section of Settings to change the layout to Vertical.
That’s all for the process of setting up the vertical layout in Elementor. Now visit the store to see how product filters display in the vertical layout.
How to Optimize Product Filters on Mobile
With our tools, you can not only create different filter layouts with Elementor but also optimize them for mobile.
On the custom shop page created with Elementor, you will see the mobile icon at the bottom left of the page. Click here and you will preview how product filters display on mobile.
Take a look at the display to see if there are any problems with your product filters when they are displayed on mobile devices. If you find that product filters don’t work well on tablets and mobiles, you can go to the Advanced sections and turn on the options of Hide On Tablet and Hide on Mobile.
However, if you still want product filters to work for mobiles, Woostify can help you.
Once you update your version to Woostify Pro, you can use not only Smart Product Filter but also many other interesting features such as WooBuilder, Elementor, and Woostify – Toggle Sidebar. This feature will help you fix the filter display on mobiles.
Search for Woostify – Toggle Sidebar in the element box search here. Then, drag and drop it above the Active Filter. With this feature, the sidebar created for the normal display (desktop) will be removed. Instead, it will set up a filter vertical layout that creates a good look on the mobile.
Woostify also offers the option to customize this toggle. So you can edit the typography, edit the border and pick the color for the toggle to make it more eye-catching.
Now, the mobile optimization has been completed. Please see how your shop page and product filters change on mobile devices.
For the final word,
If you are looking for a way to offer customers a faster and easier way to search for products on your WooCommerce store, Smart Product Filter is worth considering.
We’ll summarise what this add-on can provide for your store:
- Provide up to 10 filter types to filter your products by any criteria, attributes, taxonomies, prices, and other product data.
- Allow displaying product filters in two layouts, vertical and horizontal.
- Offer the option to customize the shop page (using WooBuilder and Elementor) and display product filters on it.
- Support loading the page in Ajax
- Optimize the filter display for mobile devices (Woostify – Toggle Sidebar).
If you can properly take advantage of the features above, you can take the shopping experience on your website to the next level.
Thank you so much for reading our article. If you have any contributions or questions, please leave a comment in the box below. We’re happy to receive any feedback. Thanks, again!
Introducing WoostifyBlocks beta - Our new plugin for Gutenberg page builder is ready to test 