How to Create a Questionnaire based WooCommerce Product Filter

Filter WooCommerce Products

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!

The Search Bar on Amazon

• 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. 

Dropdown Filter option on GAP

• 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.

Checkbox Filter Option on JCPenny

• 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:

1. The shopper selects a ‘Recommend a Product’ or a ‘Find a Product for me’ option.
2. The shopper is asked a series of questions.
3. 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.

Questionnaire-based Product Filter on Clinique

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:

1. A form Builder plugin
2. 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:

1. We have to create a ‘New Form’ for the questionnaire.
2. Then, create the multiple-choice questions using the ‘Radio Buttons’ field.
3. 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:

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.

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!

• WordPress Solutions
• With tags: Gravity Forms, Product Filter, WooCommerce

Share:

• Shreya R

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!