Smart Product Filter

Smart Filter is a useful addon of Woostify. This WooCommerce product filter offers multiple features that make the searching products process faster and easier, resulting in a better shopping experience and more sales.

Table of Contents

[Show][Hide]

Key features of Smart Product Filter
How to Set up Woostify Smart Filter?
How to set up a Horizontal layout for Product filter on your shop page?
1. Step 1: Enable Horizontal Layout for Smart Product Filter
2. Step 2: Turn off sidebar on shop page
How to set up WooCommerce Product Filter with Elementor?
How to Optimize Product Filters on Mobile?
Support Out of stock, on sale, and backorder filter

Filters by any criteria, attributes, taxonomies, prices, or other product data.
Support 2 layouts vertical and horizontal layout
Automatically adopts product data and shows only remaining filter term
Work in default shop page and in custom shop pages using WooCommerce shortcodes
Ajax loading, no need to refresh the page
Optimized for mobile

With the powerful functions mentioned above, it is worthy to know how to use the Woostify product filter addon on your site. In this article, we will show you how to set up smart product filters on your site, how to display product filters horizontally, and how to include product filters in a new shop page with Elementor.

How to Set up Woostify Smart Filter?

Step 1: Enable Smart Filter

To use Smart Filter in your WooCommerce store, first, you need to enable it by going to Woostify Options, then you see the list of features of Woostify.

Find Smart Product Filter addon and click in Activate to turn it on.

Step 2: Do some settings for Woostify Product Filter

Head to the Settings, you will be navigated to a new box where you can make some General and Style settings as follows:

In the General section, you can:

Set the layout as Horizontal or Vertical
Display shortcode: this section will be automatically set as Woostify_product_filter
Exclude: tick this option if you do not want to show the out-of-stock items for customers while they are searching for their desired product.
Index Data
Last Update: the date when you last save the product filter settings
Total Product Index: the total number of products that are applied filters.

In the Style section, you can make changes to all options I mention below:

Enable or Disable Collapse option
Enable or Disable Scroll option
Change the Scroll Height
Select Item Count Color
Change the Color and Font Size of Filter Title and Text,
Change the size, text color, and background color of Button
Change the background color of Checkboxes
Change the background color and icon color of Radio
Change the color, background color, and border style of Input
Change the Primary and Secondary color and the UI handle of Ranger Slider
Change the border style of Visual

Remember to click on the Save button at the page button to update your settings

First, copy the Woostify product filter global Shortcode.

From the dashboard, go to Appearance > Widgets

Find out the WooCommerce Sidebar widget and paste the copied shortcode in the text editor tab.

Don’t forget to hit the Save button.

Step 4: Add a new Filter

After making some basic settings for this WooCommerce product filter, you now can create a filter and include it in the searching product process.

Navigate to Smart Product Filter in the menu dashboard, then click on the Add New button to create a new filter.

In the new tab, you need to give your product filter a name, select the Filter Type and Label.

After selecting the filter type, a new dropdown menu section will appear (this will vary depending on the filter type you choose). In this example, I am creating a Visual type, so it will show Data Source for you to choose from.

Once finishing all settings above, click on the Publish button to save your product filter.

Here is the WooCommerce product filter I have created.

Follow the above process to add other filters to your WooCommerce store as you wish.

Visit the shop to check if all product filters work well on your WooCommerce store.

The process above shows you to create WooCommerce product filters and display them in Vertical layout by referring to the detailed steps below.

First, go to the Settings under Smart Product Filter, click on the General section and change the Layout to Horizontal. Then Save your changes.

This is not enough for setting a perfect horizontal layout for the product filters. To make it look well, you need to change the default sidebar setting in your WooCommerce site by following step 2.

Second, head to Appearance > Customize, then you will be driven to the customizer interface.

Now, you select Layout > Sidebar. In here, you need to set the Shop/ Product Archive page to No sidebar. For other pages like a blog single page, it is not necessary to do it.

After that, click on the Publish button on the top page to save what you have done.

When finishing this process, you can go to the shop frontend to check if it works well. All the product filters now are neatly placed on a horizontal design. Their detailed filters are behind the dropdown icons.

The above processes guide you on set up Woostify Product Filter on the existing shop pages. So how to create a new page with product filters?

The tutorial below will show you how to add and customize smart product filters on a new shop page.

Step 1: Activate WooBuilder

Go to Woostify Options, then you find WooBuilder and Activate it.

Step 2: Create a new shop page

Then, you need to create a new WooCommerce shop page, give it a name and select the type of page, then click on the CREATE TEMPLATE.

Step 3: Adding required elements to the new template

Now, you can design and customize the shop page with Elementor.

To create the product filter, you should find the Woostify – Products addon and drag & drop it to the new template.

This is only one element on the shop page. You need to add more other factors to make the shop look good. For further details of creating and designing a shop page, please take a look at this guide.

Then you can further customize it to fit your requirement.

Turn on the Enable Active Filter Buttons to allows online shoppers to find out their desired items faster and more easily.

Dropdown to the Query section, select the Current Query option to apply all product filters to this page.

Drag and drop the Shortcode widget to the page, place it right above the Filter Button

Copy the Filter global shortcode (you can find it on the Filter settings page), and paste it in the shortcode box at the left side of the screen as below:

Finally, remember to save your changes by clicking on the Publish button at the page bottom.

Let’s do some customization to optimize smart product filters on mobile screens.

First, open the shop page that you have created above.
Second, click on the mobile icon at the bottom left of the page, then a mobile version of the page will appear at the page center.

Now, you should take a look throughout your page and check whether all things work well or not, especially the product filters. If there is any wrong with the product filters, just edit the filter shortcode element on the page, turn it off on Tablet and Mobile by check the icons on Hide On Tablet and Hide On Mobile as below.

To fix such issues and show filters on mobile, you should use the Woostify-Toggle Sidebar. It will automatically take out the sidebar you created before. In this example, the widget will take the filter vertical layout on the sidebar.

Then, you can do further customization to make it outstanding.

Finally, click the Update button, and check how your shop page and product filters look on the mobile and tablet screen.

Support Out of stock, on sale, and backorder filter

From Woostify Pro version 1.7.0, you can have filter by out of stock or on sale when creating new filter type

Key features of Smart Product Filter