If you have a WooCommerce store flooding with tons of products – adding products filters can drastically improve the user experience.
WooCommerce has built-in product filter widgets to help you add product filters. However, those are pretty basic and don’t come with customizable filter options.
This is where WooCommerce Product Filter by WoobeWoo comes in handy. It’s a robust product filter plugin that helps you add stunning and fully customizable product filters easily.
In this WooCommerce Product Filter by WoobeWoo review. you will get detailed insights into this plugin. We have covered various aspects such as key features, ease of use, how the plugin works, pricing, etc.
In this section, we’ll cover how this product filter plugin works. What’s more, we will dwell down deep into the premium version of the WooCommerce Product Filter plugin.
Note: We are not going to cover and explain the free version of this plugin. You can explore more about the free version at WordPress.org.
Well, as the name suggests, the plugin allows you to create multiple filter groups and easily display them in different situations. To shed some light, you have the option to display one type of filter to mobile users and another to desktop users. Also, you can display filters based on the products you’re displaying on your website.
To get started, you need a premium version of the plugin; you need to install the plugin right on your WordPress website.
Adding Your First Filter With WooCommerce Product Filter
Once you have installed the plugin, navigate to your WordPress dashboard >> Woo Product Filter >> Add New Filter.
In the next step, name the filter that you’re adding here and proceed.
Note: Once you’re on the plugins dashboard, you will see a streamlined dashboard. You have the option to Add a New Filter or use pre-built filters that are available.
Now you need to choose the dropdown menu to see various kinds of filters. You can choose from different filters such as – price range, sort by, attributes, products tags, author, featured, etc.
We’re using the price range filter for now; if you want, you can add multiple filters. Once you choose the price range feature, you will see various options such as the price range, product categories, etc.
Now, if you want to configure any filter, in particular, you need to expand the options from the dropdown menu. For example, here, you can easily expand the price range or product category modules.
Here we’re expanding the price range filter options; as you can see, there are various controls and customization options available there. Such as you can choose the title label display options on — desktop and mobile. What’s more, you can set the display range automatically and manually.
Let’s check the “Search By” filter and see what changes we can make here. So for this filter option, you will get to choose what content to search.
You can also add various search options you choose — search by title, content, tags, SKU, categories, excerpt, etc. What’s more, you have the option to enable the “search by full word only,” even though you can also exclude various options from the search result.
To put it simply, each filter of this plugin comes with different controls and customization options. For example, you have the options to choose from various inputs such as —
Once you’re done configuring various filters as per your choice, it shows all the filters up there in the dashboard itself. The standalone point is, you can easily drag and drop these filters as per your needs and requirements.
In addition to the pre-built filters, you also have the option to build your own filters based on custom fields and custom taxonomies.
The best part about this plugin is — it’s fully compatible with Advanced Custom Fields (ACF) and the Custom Post Types UI. With these compatibilities, you can easily create custom filters without writing a single line of code.
Filter by Custom Meta Field
Many WooCommerce stores create their own custom meta fields to group products. As the customization of WooCommerce stores goes up it is important to associate all those customizations into the overall useability to improve user experience.
WooCommerce Product Filter plugin fully supports Custom Meta Field filtering. You can create custom filters to attribute the special meta fields that you have created for your store.
Filter by Color
If you are managing a fashion-related online store, the color option is one of the most important search elements used by users. And not only fashion, but a store for mobile phones also needs a filter by color option as the users will like to check based on different available colors.
With the WooCommerce Product Filter plugin by WooBeWoo, you can add color as an additional meta field and create a filter based on the color attribute.
Other than color, you can use many other different attributes such as the shape of objects, or textures of fabrics, etc.
Here are some demo of the live filters.
More filter options.
Configuring Additional Options:
Now in this section, we’ll cover how to configure the additional filters options. As of now, we have chosen filters and configured filters; now you need to navigate to the options tab to configure some of the important filters options.
First thing first, you have the option to enable — AJAX. We recommend you enable this AJAX; once enabled, your website visitors can use the filters without even reloading the pages, which make the user experience seamless. So do enable the AJAX option.
Now we have to choose where we’re gonna be displaying the groups of filters. Well, you have the option to enable/disable created filters on different WooCommerce products pages or even choose to display on mobile and desktop devices.
Choosing to display filters on mobile and desktop devices, you have the option to improve the user experience on your website.
For example, if you have a complex search by filter, it might not be compatible with mobile devices, so make sure to show that filter only on desktop devices. This helps you create a mobile-friendly interface for your website visitors.
What’s more, there are various other options available to choose from, such as setting mobile/desktop breakpoints, hiding filters on the shop pages without products, removing actions before AJAX filtering, and so on.
What’s more, you will also find various other options to make different tweaks. You will have these options:
So these are the additional options, settings, and tweaks that you can make. Let’s check other aspects.
Configuring & Customising the Design Settings
To make design changes, you need to navigate to the Design tab. Once you open the Design tab you will be presented with different menus such as General, Blocks, Titles, and Buttons.
Navigate to the General Tab, where you can easily configure the width of your filters. What’s more, you will be able to add your custom CSS and JavaScript. The General Tab is all about making changes to the look and feel of the filters.
There are other tabs available that are — Blocks, Titles, and Buttons. These are optional info; if you want to configure, you can go and make changes quickly.
Remember you have two options:
The first option is to pull the styles directly from your website theme — which is the default option. If you choose the default option, the filters will blend with the look and feel of your website design.
The other option is to override your website theme styles. To do that, you have to add custom styles. If you choose to override, you can change the styles, colors, typography, spacing. We highly recommend using the default module.
Lastly, Displaying The Product Filters on The Front-End
There are different options to display product filters on your WooCommerce store. You can choose different methods to display product filters on your store:
If you choose the shortcodes method, you can copy and paste the shortcodes to your pages. The PHP method is also fairly self-explanatory, like the shortcodes.
Another method is to use the Woo Product Filter widget. To do that, navigate to the WordPress dashboard >> Appearances >> Widgets. You need to choose the Woo Product Filter and then choose the filter you want to show. Once you save the widget and enable it, the filter will be live in the sidebar of your WooCommerce store.
Well, now comes the Elementor option. If you’re using Elementor page builder to design your WooCommerce store, this option will be handy for you within the Elementor interface.
Conclusion: Is It Worth The Hype?
So this is our complete review of the WooCommerce Product Filter plugin. As per our experience, the plugin helps you add customizable product filters without any hassle.
The standalone part of this plugin is the level of customization options it offers. While creating product filters, you can choose from flexible options such as input types, defaults, and behaviors.
In addition to the customization of filters, the plugin also provides various ready-to-use filters. What’s more, the plugin also integrates with Elementor, which means you can directly build product filters inside the Elementor.
Both the free and the premium available, you can get started with any of them. The free version has limited features. However, the premium version unlocks the advanced features and product filters.
We hope this WooCommerce Product Filter by WooBeWoo review suits your purpose well.
