Why your shop should use anything other than WooCommerce’s in-built search
WooCommerce is here to stay. Whether you like it or not, it’s the go-to WordPress shop engine estimated to run nearly 30% of all e-commerce around the world. Free to use, reliable, easy to learn and scale your business up — what’s not to like?
WooCommerce, like every other tool, does have its downsides. When you were just starting your online shop, everything worked smoothly and looked amazing. You could just add some products, descriptions and photos and you were good to go. But once the customers discovered your shop and the orders started to flow, you started to notice some drawbacks in WooCommerce’s workflow. In this article, we will cover one of the most obvious flaws which is unfortunately deeply ingrained within the platform — the WooCommerce built-in search engine. We want to elaborate on what can be done to make items in your store easy to find. Make sure you keep the following in mind:
- design for the user
- design for speed
- design for efficiency
And have no fear, this is the very first in a series of articles that will cover the platform’s shortcomings and offer you some elegant and reliable solutions with which to tackle them.
- Lost between alleys
- Going somewhat online
- Design matters
- Need for speed
- Fast and fine tuned
- What do I look like?
- Keep the engine going
First things first. Try to imagine your typical shopping experience. Entering the mall, trying to find the right shop, circling around labyrinthian alleys. You repeat this cycle each and every time until you are finally done and you can cross the last item from your shopping list. Unfortunately, online shopping can be equally tiresome and intimidating. Luckily, at least the customers don’t have to leave their armchair! But this alone should convince you to make the shopping experience as smooth as possible. How come so many e-commerce businesses get it all wrong then?
The most ubiquitous way in which online shops interact with their customers is through some kind of search engine. One could imagine it as an intertwined version of window shopping, aimless meandering through the mall and finally buying some stuff. It shouldn’t be overlooked that this is the first and most important way to eventually sell the product. As the Baymard Institute shows, more than 30% of all customers’ queries remain unfulfilled. What’s more,
“(…) a whopping 70% of the search engines are unable to return relevant results for product type synonyms (…)”
and really struggle when it comes to even minor misspellings. To put things more into perspective, the researchers tested some of the most popular (read: profitable)
e-commerces on the market only to find those problems occur in more than 50% of them. But shop owners, whether small or giant, obviously have ways to improve. More often than not, poor search results are due to negligence and lack of expertise on how WooCoomerce’s in-built search engine works. We can address three main concerns with it and tackle them one by one.
We cannot stress enough how customers’ first impression of your store matters. Are the fonts fine? What about the visual representation of your company’s values? Then there’s the loading speed, which we will cover in a minute. And finally – the engagement. Let’s assume that everything was smooth sailing and the viewer decides to turn customer. Or at least tries to. They’re about to attempt to find the right product. The very first question should be: can they find the finder? For this article, let’s focus only on the search box and leave browsing by category for later.
Firstly, the more prominent the search box’s design is, the more customers tend to use it. Some businesses, like Amazon or IKEA, like the search box to be the most visible, highest point of the header while others prefer to make it less apparent. Please remember that it is of the utmost importance that the customers are able to find the box without any fuss.
The problem with WooCommerce’s search box’s design is that it’s either very theme-specific or very limited. Even WooCommerce’s designed StoreFront theme forces you to have the search box on the right side of the header. It’s also rather small. Moreover, you cannot make it disappear by default. To make such a basic change you have to get familiar with at least the basics of HTML and CSS. It’s fine if you want to get a better grip of what’s going on behind the scenes of the front-end part of your shop. But if you’d rather focus more on improving your product, R&D or marketing than teaching yourself how to code, you should opt for a different search engine or a more customized solution.
While covering design’s importance on the site’s overall performance, we left one question hanging in the air: does your page load fast? And by fast, we mean less than 1,5 seconds. It is estimated that pages slower than 3 seconds of load speed are likely to be abandoned upon potential customer’s arrival. Every additional two seconds of loading time will cut the conversion by 25%. The list goes on and it should be remembered that your ultimate goal is to be fast. The less distracted by a slow loading page the customer is, the better.
This brings us to another crucial factor, which is the search speed. It is estimated that the customer will notice a difference between 0.1 sec and 0.2 sec when it comes to presenting the query’s results. The definite baseline lies under the 1 sec mark – more time will cause distraction, frustration and eventually force customers to leave your site for good. How could your shop improve?
Autocomplete suggestions are probably the most powerful tool to help customers find what they are looking for. While at a first glance they can be confusing, Baymard’s researchers found out that eventually they save every customer a few minutes of fruitless messing around the search bar. However, we shouldn’t forget that a poorly designed autocomplete will do more harm than good (the implementation and typical pitfalls are brilliantly described by the Baymard Institute here). There are a myriad of factors that have to be taken into account. People often misspell or don’t know the exact name/model/manufacturer of the goods they want to buy. Inflected and agglutinative languages pose another challenge to overcome when designing and proof-testing your system.
The first (and arguably the best) improvement is the implementation of some kind of synonyms list. It should contain synonyms and paraphrases for at least your best sellers and items you ultimately want people to buy. Next, you can try to improve your system and introduce tools like fuzzy search Please read further on that topic in our documentation which can help customers when they misspell an item or brand name. This will be covered in detail in another article, but please note: if it is good enough for Elasticsearch, it will probably be good enough for you. Last but not least, try using a tokenizer, which will replace any symbols and non-letters in the query and then try to match it to an actual product.
All these tools and solutions are aimed at helping you achieve one goal: make the search faster. Streamlined and user friendly search will improve conversions and keep the shopping experience as pleasurable as possible.
One last thing that can stop customers from smoothly navigating through the store: search results may be heavily distorted by one more crucial factor. The precision of the query and autocomplete suggestions is only one side of the equation. Assuming every other aspect of the search engine on your site works great, another weak link is actually how thoroughly you’ve designed your category tree and products.
Remember that your customers like to search in a manner they find convenient. Looking for iPad and for tablet may or may not result in similar autosuggestions or category suggestions – it is entirely up to you and your business model. But customers should not be misguided by poorly tagged products. Maybe pro audio is not your thing, but bear in mind that customers looking for a “compressor” should be at least guided towards “pro audio equipment”, not only offered some kind of air-pumping monster.
Keeping your products’ database well organized and annotated is by no means an easy task. But take into consideration that every properly tagged and described product will help your customer find it on your virtual shelf. When you implement certain tools, capable of scanning through detailed product metadata, you boost your search engine. It results in better sales. As your business grows, you can also implement more sophisticated algorithms that allow customers to search items similar to uploaded data, such as images, color patterns etc.
And don’t forget — speed matters!
As we’ve been going into more and more details, it probably got you thinking: ok, but how does all of this actually work in an online store? Worry no more, we have a beautiful example!
Let’s see how it all works in a real world online store. We are going to use The Bookstore Online, which might already be familiar to you. The first run will be a vanilla WooCommerce with its in-built search engine:
As you can see, the search is slow and results kick in in more than a second. This is not acceptable for a modern store, be it a bookstore or any other kind. You will simply lose the customers’ attention and ultimately lose sales.
Now, let’s see how this should work:
Great! The search query was lightning fast and the autosuggestions took far less than 0,3 seconds to pop up in the search bar (you can look it up). That way you keep your customers interested and actually help them find what they are looking for, thus boosting your conversions.
Should you be interested in what lies behind such tremendous results, here is how to get started with the FiboSearch plugin. Additionally, [please read further on this on how to display custom ACF fields into your autosuggestions using our custom plugin, FiboSearch. A small visual hint from The Bookstore Online we dare to present you here:
As you can see, WooCommerce is not so great when customers actually try to find the product. There are three simple rules that we encourage you to keep in mind while creating or redesigning your store:
- design for the user – let the customer find the search box, displayed in an elegant, yet prominent fashion;
- design for speed – load and search speed are crucial factors when it comes to making a positive impression, converting viewers to customers and keeping them happy and focused;
- design for efficiency – create and optimise your synonyms base; write precise and thorough descriptions; use keywords; rethink the overall structure of your shop’s category tree and try to keep it as clear as possible.
We hope you enjoyed our take on WooCommerce’s search engine. We’d like to hear from you, so let us know what other problems are keeping you awake at night. Please subscribe to our newsletter and follow up on related articles.