As an eCommerce store owner, you can never underestimate the value of a good product search filter. Studies have shown that a search filter can increase sales by up to 76%. That’s a pretty huge figure. If you’ve noticed, product filters range from simple category based filter options, to price based sliders and color swatches.
I explored product filters when I worked on a WooCommerce project a while ago. The project involved creating interactive filters on the shop page. It wasn’t something I had tried out before, so I got to learn a lot. And the outcome was pretty cool.
Recently, we had someone inquire about building a questionnaire based product filter. It’s basically filtering products based on answers provided by the shopper. You can take a look at this website to know how the filter works.
- The shopper selects a ‘Recommend a Product’, ‘Find a Product for me’ or ‘Diagnose a Product’ option.
- The shopper is asked a series of questions.
- Based on the answers provided, products are recommended to the shopper.
This questionnaire based filter could work well on a cosmetics website, digital products store, a consumer goods store, investment companies and so on.
If that’s something you’re looking to achieve, let’s move on and discuss how we can build it.
Hire 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 product filter option.
We need the following to get us from point A to B:
- The Gravity Forms plugin
- A great UI designer
I am not kidding!
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.
I’ve tackled quite a few demons with the Gravity Forms plugin, and I can guarantee, it’s the plugin you need for the job. I’m not overly thrilled about the user interface it provides, and that’s exactly where the UI designer fits in.
You see, user interface is quite subjective. So based on your requirements, you’ll need to contact a great UI designer. I’m not one, so I can’t help you there. But my colleague Ankita can. She and our front-end team here at WisdmLabs have done some great UI work, which you can take a look at here.
Prerequisite: Add Attributes to WooCommerce Products
Now, we need attributes to filter our products (you knew that! 🙂 ). If you do not know what attributes are, they are product descriptors. For example for a shirt, the attributes would be the color, the size, the brand, and the like.
All good so far? Cool.
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.
How to Create Product Attributes
- 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, we have to add each question with a single-choice type of answer.
- We have to ensure that the value for each option matches a product attribute we’ve set for our products.
We have to then add the created Gravity Form on a separate page.
How to Filter 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.
- That’s about it!
Pssst…! Since Rémi Corson has covered the filtering part really well, I’ll just direct you to 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 surely create an interactive questionnaire based product filter for your WooCommerce store.