5Days
18Hrs
25Mins
37Secs

THE BLACK FRIDAY SALE IS HERE!

Get 30% off all plugins until 30th Nov - use coupon BF2020 at checkout
Buy Plugins

How to add dynamic filters in WooCommerce

November 12, 2020

Adding dynamic filters or cascading filters in WooCommerce improves the customer’s purchasing user flow, especially if you sell products with lots of attributes that have multiple levels of information. For example, if you run an auto parts e-commerce website, you’d want customers to quickly find what they want to buy.

The only problem is that the default WordPress and WooCommerce filters don’t let you create dynamic filters. In other words, when users choose an option in one filter, it won’t change the available options in a second filter based on the user’s selection.

The WooCommerce Product Table plugin lets you add cascading dynamic filters for WooCommerce products. Following our example, this would significantly improve the shopping experience of the auto parts website. Now, when the user chooses Toyota from the Make dropdown, the Model dropdown will include only Toyota models.

In this article, we’ll walk you through a step-by-step tutorial explaining how you can add dynamic filters to your WooCommerce website.

Why you need dynamic filters on your WooCommerce store

If your WordPress site contains a lot of information about e-commerce products, you’ll need to display it in a way that allows users to easily find what they’re looking for. An effective way to do this is by using dynamic filter dropdowns and widgets that are connected to one another. In this way, it works like a WooCommerce faceted search.

For example, let’s say you sell car parts on your WooCommerce-powered website. You can use smart filter dropdowns and widgets to enable customers to select a car Make and Model. Once they do that, they will see the available parts for that car in the product table.

Let’s quickly step through some different ways to display this information:

Scenario #1: single filter dropdown

You could create a single filter dropdown that has multiple levels within a single list so that the models are indented under the relevant makes. This is one option with the WooCommerce Product Table plugin, as the items in each filter dropdown are nested and hierarchical.

WordPress table plugin hierarchical category filters
An example of a single filter dropdown in WooCommerce Product Table.

This is great, but can lead to usability issues in situations where you have long lists of items. It’s even better to create a separate progressive filter for each piece of data so that customers can drill down one stage at a time. The cascading filter dropdowns work together to help customers find specific products.

Scenario #2: multiple standalone filters

You can create multiple standalone filters for Make and Model but this would also affect the user experience negatively. When a customer selects a Make, they’ll be shown all the models for the selected car makes.

In a perfect world, when they select Volkswagen then they expect the Model filter to update to display VW Golf, VW Passat, and VW Atlas. Without a series of filter dropdowns, they’d be shown all possible models from other makes, such as BMW models.

Scenario #3: filters that aren’t connected

Even if the different pieces of information that your users can filter are not connected, it’s still frustrating if they select an item from one filter, and the other filters don’t update to show the available options.

For example, let’s say you sell apparel. A customer might try to select hoodies and find that you don’t have any hoodies in your product catalog. It would be better if the categories had updated to only show apparel that had items from the selected category.

The only workable method for displaying this kind of information is by using a series of connected, dynamic filter dropdowns.

Setting up dynamic filters in WooCommerce

WooCommerce Product Table is a WooCommerce dynamic filter plugin that helps you display products in an AJAX-based, front-end table layout. It lets customers filter, search, and sort products dynamically.

WooCommerce Product Table
The simplest way to add dynamic filters in WooCommerce.

In addition, the front-end table layout lets you choose which columns you’d like to display to present product details.

So, if you sell clothes, food, gift items, accessories, pet supplies, or stationery, you can choose to show the product’s image, name, description, price, and add to cart buttons. And if you sell less visual products such as hardware goods, e-books, electronics, you may want to leave out the product image since it doesn’t significantly affect the customer’s purchase decision.

Dynamic filters example apparel store

Here’s a brief overview of the key features on offer with the WooCommerce Product Table plugin:

  • It comes with built-in custom widgets that allow customers to filter products based on pricing, ratings, or attributes.
  • You can add dynamic product search filters above the table to allow customers to dynamically filter products based on a cascading series of tags, categories, taxonomies, and attributes.
  • Customers can filter products based on attributes using a dropdown list or sidebar widget.

On the front-end, the WooCommerce dynamic filter options enable customers to quickly find the products they want and add multiple products to the shopping cart at once. This simple feature can help you reduce cart abandonment rates, boost conversions, and increase sales.

By using this WooCommerce dynamic filters plugin, you can make the shopping experience less frustrating. It will list your products in a table layout complete with cascading filter dropdowns above the table. This way, customers can make a selection using one filter and the content of the other filters will update automatically.

When to use dynamic filters on your website

You should use dynamic filters on your online store if you store a large amount of information about products that causes friction in the customer’s purchasing flow. Dynamic filters help you better organize and display multiple pieces of data (such as categories and tags), allowing users to easily find the products they want.

Here are some use cases where it makes sense to use dynamic filters:

Use case #1: e-commerce website selling car paint

If you create a configurable product, you should use cascading dropdowns to present the available options.

For instance, let’s say you sell automotive paint for different cars. So, when a customer selects your Spray Paint Value Pack Kit for their car, they’ll need to select their car’s Make, Model, and Color.

A series of dependent dropdowns are perfect for this. If the user selects the Volkswagen model, then only Volkswagen models should be displayed and only colors available for that particular model should appear in the next two dynamic filter dropdowns.

Use case #2: Online apparel store

Let’s say you sell fabric in different Colors and Materials. If the customer selects blue, you want the Materials filter to only contain the fabric materials that are available in blue.

This way, the customer won’t have to wait till the very end to find out if you don’t have any fabric available in blue and the material they want. It improves the user experience significantly.

How to add dynamic filters to WooCommerce

For this tutorial, you’ll need a WooCommerce website with some products added to it and the WooCommerce Product Table plugin.

Step #1: Install and activate the WooCommerce Product Table plugin

Start by installing the WooCommerce Product Table plugin to your WordPress website.

  1. Get the WooCommerce Product Table plugin. The plugin’s files and license key will be in the confirmation email.
  2. Log in to your WordPress site and navigate to Plugins Add New.
  3. Upload the plugin’s files to your website and click the Activate button to continue.
  4. Go to WooCommerce Settings Products Product tables from your admin dashboard and enter the plugin’s license key in the License key field.
  5. Click on the Save Changes button to continue.

Once you’ve activated the plugin’s license, you’ll be able to add a product table to any page (or post) on your WordPress website using the shortcode [product_table]. And if you’re using the Gutenberg editor, simply add the WooCommerce Product Table block and a table will automatically be generated for you.

Step #2: Set up dynamic filters

You can also change the plugin’s configuration settings from the same page (i.e. WooCommerce Settings Products Product tables page). This lets you create visually-appealing product tables with WooCommerce dynamic filter options for your e-commerce site.d

The WooCommerce Product Table plugin offers various configurations for your product table. You can view the available options under the Table controls section on the settings page.

Dynamic filter settings in WooCommerce

For example, you can decide which dynamic filters to show as dropdown lists in the table layout. The available options include Disabled, Show based on columns in the table, and Custom.

You can filter WooCommerce products based on:

  • Categories
  • Tags
  • Custom taxonomies
  • Attributes
  • Price
  • Average rating
  • Additional options offered by third-party filter plugins

As you can see, there are tons of dynamic filters to choose from.

If you select the Custom filter, you can list the dynamic filters you want to include in the Custom filters field. This lets you decide which dynamic filters you want to display regardless of the columns being shown in the table layout.

The available options include:

  • categories – To display the product categories as a filter option.
  • tags – To display the product tags as a filter option.
  • attributes – You can use this option to show all available product attributes using the filter option. This way, you can display one filter for each available product attribute. For instance, if your product attributes are Make and Model, two filter options will be displayed above the table. This means customers will be able to filter products based on make and model.
  • Taxonomy column – To show products for a custom taxonomy filter.
  • Attribute column – To show products for the custom attribute filter.

Preview

Here’s a preview of the WooCommerce Product Table plugin in action:

WooCommerce dynamic filters example

Add dynamic filters to your online store today

We explained how you can improve your online store’s shopping experience and reduce cart abandonment rates by adding dynamic filters.

The WooCommerce Product Table plugin lets you create dynamic filters that are perfect for websites that store large amounts of information. Its dependent filters will enable users to narrow down their search in a logical way and find the product they want, faster.

WooCommerce Product Table
The simplest way to add dynamic filters in WooCommerce.

Ready to add dynamic filters to your online store and increase sales? Get the WooCommerce Product Table plugin today!

Please share your thoughts...

Your email address will not be published.