#1 Independent Seller of WooCommerce Plugins
Shop by category
E-COMMERCE UX VIDEOTRAINING

E-COMMERCE UX VIDEOTRAINING

Discover our training experience and improve your e-commerce to loyalize your customers and increase your sales. view our courses

E-COMMERCE UX AUDIT

E-COMMERCE UX AUDITComing soon

We audit your e-commerce and help you to optimize it for higher conversions.

Cart

< Back to blog

TutorialsThe best way to set up search functionality on your WooCommerce Store

‘A potential customer lands on your site and can’t find the desired product, therefore, the customer leaves to never come back…’ This is so true and it is almost impossible to measure how many visitors are affected. It gets worse if you are running paid ads and the landing page is a generic page and you expect the customer to understand where to find what they are looking for.

How do you know if you even have a problem? If you have your store connected to Google Analytics and see a high bounce rate plus a low average pages-per-session, this could be your first hint.

On the other hand, you also want to find out what your customers are interested in, right? If you are running a physical shop, you would find out pretty quickly as many customers will ask you where this is, or whether you stock a certain item? After a while, you act by adding it to your stockist or move it by the till… inevitably your sale will grow and customer satisfaction will improve.

Here are a few super valuable ideas to get your WooCommerce Search sorted.

In this tutorial we cover:

  1. Setting up product-search functionality
  2. Optimizing the search functionality and user experience
  3. Tracking search queries using Google Analytics
  4. Improving your site search results.

1 Setting up product-search functionality

This is pretty straightforward as WordPress has native search functionality installed. However, when using this it searches the complete site on keywords and you can not set up any limitations. For WooCommerce stores this can be a complete waste of time. It will often give the customer completely wrong results which are not products but blog posts instead… you might as well show them the door next time they come into your shop.

The next option is by installing the YITH Ajax WooCommerce Search plugin ‘FREE’ version on wordpress.org. This shows some limited options like changing the label and number of characters to auto-complete and to show results… this is already a huge step forward in improving the Store’s search functionality. Firstly, it will only show products that are listed in your WooCommerce store. Secondly, the search is quick and instant, so no page load required to see the first results. The premium version has a ton more options needless to say and you can explore them here >

2 Optimizing the search functionality

Here are a number of tips to help you get the most out of your search functionality.

a) The user’s experience is key

Adding a prominent search functionality will help you and the customer. Make sure this is clearly visible in both the desktop version and a mobile version of your website. To distinguish the search box clearly from the rest of the user interface, you must outline the input field and make sure the internal color of the box contrasts with the surrounding color. Make the icon and the input box big enough so that the user can tap on them, even when using a small device.

When the auto-complete and suggested results are displayed, make them wide enough with clear contrast and a possible image to quickly identify the product the visitor is searching for. And if the users want to see the full results add a clearly visible ‘submit’ button or an icon, such as a magnifying glass, that performs the same function when clicked.

b) Allow for misspelling and mistakes

Everything has its specific name, obviously. But we should also be allowed to make common mistakes due to a word slip, wrong accents or simple ignorance.

To make you understand how important it is to save users who make spelling mistakes, consider that misspelling www.ebay.it as www.ebuy.it will redirect customers to the Aliexpress website… but don’t let the word out!

The same thing goes for your website: if customers type in “shurt” instead of “shirt”, don’t punish them with an empty page, show them the results they might probably be after. Even if no results match a misspelling search term, show the results with the word the customer used, so they can correct the spelling.

Be conscious of smaller devices with most initial searches happening from a mobile device, the chances of mistakes are much greater.

c) Making results of ‘no results’

‘You can’t please everyone’ is a common phrase, but you can suggest an alternative… The same if a ‘no result’ page. Your customer has arrived in a dead-end by displaying a blank page. Wow, can you imagine this happening in a real brick and mortar shop? Of course not as you will pass the best-selling items as well as suggesting alternatives that might be considered too. Try and give the same experience to your customers.

d) Autocomplete and autosuggest

As weird as it might sound, even typing on a keyboard might seem tiresome and we can help our customers on that matter.

The autocomplete function is very important for a search bar and it leaves customers with a positive feeling as if the website understands them. Since they don’t need to enter the whole name of the item they are after and this helps out those who only know a part of the name and still be able to find it.

And even in cases like this one, we should try not to turn a positive aspect into a negative one. For instance, too many autocomplete results, with just one letter difference might just confuse customers who will find themselves wondering “which one is the one I’m after?”

e) Include symbols in your search service
It’s important to make sure that symbols are included in search results on your websites. We often underestimate this aspect, but it’s an important one, especially with electronic products. For instance, the option to display the symbol “ to indicate inches is essential. Also, in many languages, different characters are used, check that this is enabled if your customers tend to use these, so you don’t miss out.

3 Tracking search queries

Something quite simple to set up in Google Analytics yet very few people use this feature. This is probably the most insightful and easy market research you could do. Showing in the screenshot you can see the search queries and subsequent behavior of the user in Google Analytics.

An example of the list of search queries you can find in GA

To set this up: Go to your Admin tab in Google Analytics, make sure you have the right authority level to edit this or ask your webmaster. Under view settings, scroll down to the Site Search Tracking and toggle to on.

Add the query parameter(s) which can simply be the search query. To find this out follow the next action.
Perform a search on your site and look in the URL after hitting return.

In this case, we performed a query for ‘search’ on yithemes.com

The part after the last ‘&’ sign is what you need and in the case of yithemes.com this is followed by ‘s’. And that is it… as you exclude ‘=’, you add ‘s’ to the Site Search Query Parameter.

Now wait for a few days and see the list grow of searches before you do your market research in improving the site search and results.

4 Improving your site search results.

When the search results are listed, display them in order of relevance to the term—from the most related to the least related—or according to the regularity with which the user selects a particular option.

A common mistake is the inappropriate use of tags or categories, so the user searches for a cereal bowl, and in the result, they find a dog bowl because the two products are in the same category. A classic error, but just imagine this happening in a real shop… I think this time it will be you being offended and doing a 180-degree turn towards the exit.

If the results are too broad and include too many related products, you should consider a filter. For example, using ‘YITH WooCommerce Ajax Product Filter‘ to segment the results by color, size, and material. These filters can be anything that you set up.

The most important part is that you test it, improve it, and keep checking those Analytics results. Something so simple as a site search can really bring so much more clientele and revenue to your online store.

So to recap on implementing a WooCommerce Search Bar

  • Use a plugin that can separate products from your WordPress site
  • Locate the search bar prominently and make sure the useability is good for smaller devices
  • Optimize the functionality with autosuggest and autocomplete as well as the initial results
  • Track and Analyze your customer’s searches
  • Create a good search-results page with suggestions and best sellers of no-results appear.

Focusing on these 5 steps will help your customers find what they need and if they can’t find it, you will have a record of what it is they are after. By pro-actively improving the experience, there is no doubt you will generate more revenue, improve customer satisfaction, and also improve your store’s Search Engine Ranking.