Being WordPress experts, we get to develop some fantastic website and Ecommerce solutions for our clients.
One thing that most of these websites have in common is the need for a good search, helpful facet filtering and related content discovery. As great as WordPress and WooCommerce are, these features are often left to the developer to figure out for themselves.
Typically, the way we used to do this was to install a plugin that would aim to solve each of these issues or build the functionality ourselves.
This solution can work, but it has drawbacks:
- Depending on too many plugins can lead to maintenance and security issues
- Plugins can be slow and add more of a performance drain than upgrade
- Customisation is often difficult
Some of our clients have a big catalogue and need better performance, so we went back to the drawing board to find a scalable and maintainable solution to our problem. We found one piece of software that really stood out. Elasticsearch.
Enter Elasticsearch
Elasticsearch is an enterprise level search server that is built on top of Apache Lucene. It provides a distributed full text search service that communicates via JSON over HTTP. We started playing around with this and found that 10up had built a plugin, ElasticPress, that handles the indexing/syncing functionality within WordPress.
So, we have the ability to sync our posts. What else? Well, ElasticPress does some magic with the WP_Query class so that you can use it to query Elasticsearch. For example, to fetch 20 posts:
new WP_Query([
'ep_intergrate' => true,
'post_type' => 'post',
'posts_per_page' => 20,]);
Notice that we only had to set the “ep_intergrate” argument to make this work. In some cases, such as search, the flag is not needed. This means we can make a sites existing queries Elastic compatible with little effort. It integrates really well with WooCommerce through a module that runs filter and product category queries through it. This is good but for our use cases, it’s not enough.
There are some sensible defaults that we like to have with all of our WooCommerce websites, so we set about building a plugin that forms a tighter bond between ElasticPress and WooCommerce.
Replacing MySQL queries with Elasticsearch
The first problem our plugin aims to solve, is utilising Elasticsearch’s built in filter generation functionality. The Elasticsearch API for this is called aggregations. We replace the sidebar and run our custom aggregation query into Elasticsearch.
Not only are our filters faster to render, they allow us to utilise Elastics built in features. For example, we are now able to render a price filter that lets users choose what price rage they want their product to be in.
We can also sort the aggregations into a tree structure and allow developers to specify the depth of the filters, and on top of that, if you only want to view products that are in stock, you can.
Our filters allow our clients to choose what filters they wish to show per category page, something we were not able to do before. We also implemented a solution for filtering through AJAX. We then went another step further and threw in infinite scrolling on all categories and shop pages so users don’t need to take that extra step to view more products. We also made products easier to find by adding autocompletion to the search bar.
That’s a 87.85% speed increase, without compromising any functionality.
Not only is the functionality we’ve added desirable, it actually makes your site faster. A lot faster.
One of our big Woo sites has over 30 thousand orders; searching for an order by it’s ID took 24.70 seconds. With Elasticsearch powering the query, we reduced the response time down to 3 seconds flat. That’s a 87.85% speed increase, without compromising any functionality.
Front end improvements in WooCommerce
The front end impact is just as good. Users can ask our sites complex questions, such as:
“Show me men’s shirts, in red, that are in stock, in size Medium and priced between £50 and £100”
Elastic can handle queries like this in less than 100ms. We have implemented our plugin on a few of our live WooCommerce sites, which can be found in our web design portfolio.
One particularly interesting website in our portfolio is Absolute Antibody, where we have 50K SKU’s being syncked form an internal CRM, then indexed in to Elasticsearch to improve the websites UX, pagespeed and search.
We are open sourcing the plugin in the near future, so watch this space! But if you need help to improve your WordPress website, we’d be happy to help.
