As an eCommerce store owner, you can never underestimate the value of a product search filter. Studies have shown that a good search filter can increase sales by up to 76%. That’s a pretty huge figure. But wait, what do you think I really mean by a ‘good’ product search filter?
Search filters act like a discovery channel between your prospects and your website. The right kind of filtering and sorting is supposed to improve your prospects’ User Experience by allowing them to find the product they’re looking for in less time. If your users can’t find the exact product they require in minimal time, there’s a good chance they’ll bounce right off, taking your revenue with them.
Having said that, it’s extremely important to get your filtering on point. Even though you’re trying to accurately point your users to the products they’re looking for, you want them to look around your store and explore other options that could interest them. As an entrepreneur, you’re ultimately aiming at driving sales.
The Conventional Filters
If you’ve noticed, product filters range from simple category based filter options to price based sliders and color swatches. Let’s quickly get acquainted with a few common types of product search filters.
- The Search Bar- We all know what this is. We’ve one on our website too. A user enters the name, category or a certain ‘attribute’ such as color, weight or size of the product, based on which the search results are obtained. As simple as it sounds, if you’re really looking to optimize your search bar, you’re going to have to dive deep into the little details. Everything from the position of the bar to autocompleting search queries, contributes to driving sales!
- Drop-down Menu- A user selects one field from a given set of options. This drop-down menu generally is used to create ‘Sort By’ filtering wherein, products could be filtered or arranged based on the users’ preference. Although technically, this does not qualify as a filter, it increases the possibility of a potential customer finding what they’re looking for and optimizes their product browsing experience.
- CheckBoxes- Traditionally classified as faceted search options- checkboxes provide users a pretty easy what to filter what they’re looking for. Users can check/tick single or multiple parameters associated with products they’re looking for. It’s good practice to have a more visual representation of your checkboxes. Rather than writing out a list of colors for example, which can be ambiguous for users, you can just use the color itself.
- Sliders- They’re generally represented in the form of a bar with adjustable start and end points. This kind of filtering is often used to allow the users to select a particular price range.
But, are these filters good enough?
Since every online products store seems to be using some or all of these filters, we’ve all come across them before. They’re easy to use and serve the purpose of generating optimal search results, which is great! But, the eCommerce industry is advancing continuously and rapidly.
What’s going to make your website or your offerings stand out from all the alternatives out there? What’s to stop your prospects from purchasing from another vendor? What’s going to make them come back around to your store?
The answer to this is pretty simple. Make your customers feel ‘Understood’. It’s all about building a relationship with your prospects and creating a personalized experience for them. Since we’re not talking about a tangible store here, accomplishing this could sound a little daunting. So, our best bet would be to use what we’ve got and to make the most of it.
Here’s introducing personalized and interactive search filters!
Questionnaire-based Product Filters: Search Experience Personalized
A questionnaire-based product filter is one that talks to a potential customer. The interaction happens as follows:
- The shopper selects a ‘Recommend a Product’ or a ‘Find a Product for me’ option.
- The shopper is asked a series of questions.
- Based on the answers provided, products are recommended to the shopper.
A lot of top websites are already using a questionnaire based filter. Let’s take a look at a few of them to understand better.
Example 1: Clinique, a popular skincare range, offers a “Find Your Perfect Skin Care Routine”. It takes you through a set of elaborate questions based on which the appropriate skin care product is suggested. They’ve considered everything from the customers ‘Skin Tone’ to the ‘Climate’ that their skin is exposed to.
Definitely, something that makes them stand out among other stores selling the same kind of products!
Example 2: Revel Woods, a hardwood flooring store, goes way beyond the regular search by allowing you to “Find Your Perfect Wood Floor”. This option on their website analyzes everything from your color preferences to the amount of activity on the flooring!
It’s easy to see they’re going an extra mile to offer the best-suited products to each of their customers.
Now, both these websites have an extremely detailed set of questions with an excellent User Interface! However, your business may or may not have such comprehensive requirements. When you’re curating your questions, you want to make sure you’re focusing on pointing your prospects in the right direction and not stunting their options.
Here’s a snippet of a basic Restaurant Finder that I created using Gravity Forms.
Now that we know what we want to accomplish, let’s get down to the ‘How’ part of it.
Building an Interactive Product Filter: the Right Tools for the Job
We are at point A– we have a WooCommerce store with several products.
We need to get to point B– a WooCommerce store with several products, and an interactive question-based product filter option.
We’re going to need the following to get us from point A to B:
- A form Builder plugin
- A great UI designer
Since the filter option is essentially a questionnaire, which can be shown to a shopper using a simple form. You could choose to construct this form in HTML. But honestly, I’d go with a form builder plugin. It’s a time and cost-effective option. The Gravity Forms plugin, is a great fit for this job. However, I’m not overly thrilled about the User Interface it provides. You see, the user interface is quite subjective. So based on your requirements, you’ll need to contact a great UI designer (*cough* could be us *cough*, ahem ahem).
Prerequisite: Add Attributes to WooCommerce Products
To filter products, we need to identify particular categories or attributes of the product. So, while you can directly categorize the products on your WooCommerce store, we need attributes to further filter products. Attributes are basically are product descriptors. For example, the attributes for a T-shirt would be the color, the size, the brand, and the like.
Once we identify the attributes for our products, we need to add them to the product. In WooCommerce, you can spot an ‘Attributes‘ tab in the ‘Product Data‘ section. We will be using this setting to add attributes to products.
We’ll have to set these custom attributes for all products.
Create Product Attributes for WooCommerce Products
- Go to Products -> Attributes. Here, you have the option to create custom attributes.
- Once you add a new attribute, you need to add associated values (known as terms). These can be added by editing Settings for each Attribute created.
- Now, these attributes are not associated with any products; you’ll have to add related attributes and terms for each product in your WooCommerce store.
Create the Questionnaire using Gravity Forms
Once we’ve added the product attributes, we can proceed to create the questionnaire using the Gravity Forms plugin. If you aren’t familiar with the Gravity Forms plugin, you do not need to worry. The process is quite straightforward:
- We have to create a ‘New Form’ for the questionnaire.
- Then, create the multiple-choice questions using the ‘Radio Buttons’ field.
- We have to ensure that the value for each option matches a product attribute we’ve set for our products.
A Questionnaire using Gravity Forms
We have to then add the created Gravity Form on a separate page.
Filtering WooCommerce Products
The final step is to use the answers selected by the shopper to filter products. For this, we’ll obviously have to use some code. What we’re going to achieve is the following:
- Each time a shopper submits the questionnaire, we’ll have to loop through the answers provided by a shopper and save them in an array. We have to use the gform_after_submission hook here.
- We have to then query WooCommerce products which include the attributes selected and list them.
And that’s about it!
Pssst…! Since Rémi Corson has covered the filtering part really well, you can check out his article to give you a great idea of the code you need to add to filter products based on multiple selected attributes.
Pretty simple isn’t it?!
With the above-mentioned process and a great UI designer, you can create an unmatched User Experience for your WooCommerce store.
I’d love to hear your thoughts on enabling an Interactive Search Filter on your WooCommerce website. Comment below and let me know!
Chris Wstrmnn :
There’s also a very easy to use WordPress Plugin called WP PRODUCT ADVISOR for online shops, niche sites owners and affiliate marketers. It’s exactly what you are trying to realize with Gravity Forms here, but waay easier.
1. Create attributes like price, brand, model etc.
2. Create questions based on the attributes
3. Insert shortcode on whatever page you want.
Check out: wpproductadvisor
Dylan Keys :
Can someone please help me get this to work? I have products that will be using multiple attributes that the filter needs to use in order to provide the correct products.
Pooja Shivaji Lokhande :
can we use the contact form instead of gravity forms?
Salvo Rossi :
This is great, but there are some tools that help with this nowadays. The best would be Advisor Quiz which allows you to easily build a quiz that will work as a woocommerce product filter.
I saw some nice examples on a few websites
how can i make step 1 and 2
1. Each time a shopper submits the questionnaire, we’ll have to loop through the answers provided by a shopper and save them in an array. We have to use the gform_after_submission hook here.
2. We have to then query WooCommerce products which include the attributes selected and list them.
I don’t know how to Filter WooCommerce Products
The given demo link doesn’t work at all. demo.wisdmlabs.com/health-checker-example/
Aparna G :
The demo’s working at our end. Please try it out once again.
This is just what I’m looking for too except than i use custom taxonmies, can you help me accomplish this? Im not very good at coding so i need some help with ‘How to Filter WooCommerce Products’
This is just what I’m looking for . But can you show the example code you used to loop through the answers provided by the shopper and save them in an array using the gform_after_submission hook? And the woocommerce product query? I’m not a coder so that step is out of my range.
Lokender Singh :
I like your post, Do u have any example (anyt site ), which shows product based on user questions.
Aparna G :
Clinic offers such a functionality, to help visitors select suitable products. We had implemented a similar functionality for a client. You can take a look at the details of the project here.
Thanks for this post, it has been really helpful, the only part where my code is falling short is at “We have to then query WooCommerce products which include the attributes selected and list them.” Got any pointers as to why i can’t find any products when I query on my custom field?
Aparna G :
Hi Barry, there could be two reasons as to why you cannot find any products when you query on the custom field.
1. You have not mapped attributes properly.
2. Your SQL query is not correct.
I could help you better if you could give me some information on the code you have implemented.
Thanks the the reply, I have managed to get products to show now, but the problem now is that when the custom field on the product has more than one value it isn’t showing, ie. my custom field on product is sm_attribute_filter and values are value1,value2
I use the following code to find the product:
$meta_query = array(
‘relation’ => ‘AND’,
‘key’ => ‘sm_attributes_filter’,
‘value’ => ‘value1’,
‘compare’ => ‘=’
‘key’ => ‘sm_attributes_filter’,
‘value’ => ‘value2’,
‘compare’ => ‘=’
$args = array(
‘orderby’ => $orderby,
‘order’ => $order,
‘no_found_rows’ => 1,
‘post_status’ => ‘publish’,
‘post_type’ => ‘product’,
‘orderby’ => ‘date’,
‘order’ => ‘ASC’,
‘meta_query’ => $meta_query
$products = new WP_Query( $args );
If you need more or a better sample, pls let me know. Thansk again so much.