The Conventional FiltersIf 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 PersonalizedA 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.
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 JobWe 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
Prerequisite: Add Attributes to WooCommerce ProductsTo 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 FormsOnce 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 FormsWe have to then add the created Gravity Form on a separate page.
Filtering WooCommerce ProductsThe 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.