1. Home
  2. Docs
  3. Pro Modules
  4. Smart Product Filter

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.

woocommerce-product-filter-1

Key features of Smart Product Filter

  1. Filters by any criteria, attributes, taxonomies, prices, or other product data.
  2. Support 2 layouts vertical and horizontal layout
  3. Automatically adopts product data and shows only remaining filter term
  4. Work in default shop page and in custom shop pages using WooCommerce shortcodes
  5. Ajax loading, no need to refresh the page
  6. 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.

woocommerce-product-filter-2

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:

woocommerce-product-filter-3
  • 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:

woocommerce-product-filter-4
  • 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

Step 3: Add Product Filter to the WooCommerce shop page sidebar

First, copy the Woostify product filter global Shortcode.

woocommerce-product-filter-5

From the dashboard, go to Appearance > Widgets

woocommerce-product-filter-6

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

Don’t forget to hit the Save button.

woocommerce-product-filter-7

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.

woocommerce-product-filter-8

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

woocommerce-product-filter-9

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.

woocommerce-product-filter-10

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

Here is the WooCommerce product filter I have created.

woocommerce-product-filter-11

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

woocommerce-product-filter-12

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

woostify-product-filter-1

How to set up a Horizontal layout for Product filter on your shop page?

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

Step 1: Enable Horizontal Layout for Smart Product Filter

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

woocommerce-product-filter-12

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.

Step 2: Turn off sidebar on shop page

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

woocommerce-product-filter-13

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.

woocommerce-product-filter-14

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.

woostify-product-filter-2

How to set up WooCommerce Product Filter with Elementor?

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.

woocommerce-product-filter-15

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.

woocommerce-product-filter-16

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.

woostify-product-filter-3

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.

Step 4: Configure the Product filters

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.
woostify-product-filter-4
  • Dropdown to the Query section, select the Current Query option to apply all product filters to this page.
woostify-product-filter-5
  • Drag and drop the Shortcode widget to the page, place it right above the Filter Button
woostify-product-filter-6

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:

woostify-product-filter-7

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

How to Optimize Product Filters on Mobile?

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.
woostify-product-filter-8
  • 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.
woostify-product-filter-9

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.

woostify-product-filter-10

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

woostify-product-filter-11

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

woostify-product-filter-12

Was this article helpful to you? Yes No 1

How can we help?