One thing that all of these sites have in common is the need for a good search, fast filtering and relevant product discovery. As great as WooCommerce is, 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:
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.
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:
'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 Woo sites, so we set about building a plugin that forms a tighter bond between ElasticPress and WooCommerce.
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:
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.
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 two of our live WooCommerce sites, which can be found here:
We are open sourcing the plugin in the near future, so watch this space!