Categories
Wordpress

Woocommerce Algolia: How To Add Price (and other fields) to AutoComplete DropDown

I have often wondered how we can add Price (and possibly other product meta data like Average Rating, etc) to the drop down for Algolia Search As You Type solution. Since the Algolia plugin is not supported by Algolia anymore, this was not easy to find. In this post

Background

This post assumes that you have Algolia search working on your WooCommerce website. This post also assumes that you have your main search bar controlled by Algolia for populating the search results.

Steps

Let us get to the code.

  1. Essentially, I took the information provided at the 2 links below

2. VERY IMPORTANT: After adding the code and clearing caches, make sure to click on “Re-Index” and “Push Settings” for the Product Index (found under WordPress Admin Dashboard->Algolia->AutoComplete). Wait a few minutes for the Products to re-index with Algolia and then try your change.

Code

The code is what you really came here for, so without further ado, I present to you the code that I added to get this working. The gist below shows changes to 2 files:

  • wp-content/themes/child-theme/algolia/autocomplete.php – You have to copy this over from the algolia plugin directory and then make changes
  • wp-content/themes/child-theme/functions.php – You should be familiar with this file. Simply add this snippet to the bottom of your existing functions.php file

https://gist.github.com/amitramani/39923b821fc4aa6d9c8e2fc531ee536b

Even though this example specifically deals with the “Price” field, the same logic can be used for adding any other woocommerce product meta data. My next step was going to be to add Average Rating to the Autocomplete results drop down.

Conclusion

If you have found this useful, leave a comment. This is first of a series of posts related to my coding adventures with customizing Algolia on your website. I truly believe it is a fantastic search solution. We are thankful to the WebDevStudios team for taking it over. Please provide your feedback/questions and I will try my best to respond.

By Amit Ramani

Ever heard of 'tech and tack' together in the same sentence? Chances are you did not. I am part owner of a 'tack' store in Wellington (TACKNRIDER), and full owner of a 'tech' firm(ANTERIK).

4 replies on “Woocommerce Algolia: How To Add Price (and other fields) to AutoComplete DropDown”

I tried your code and at first it was not working on my site. Figured out I had to Re-index and Push Settings for Product on the plugin page and now it works. Thank you!

Hello @vmihai
Sorry, I should have mentioned that in the steps. Funny thing is I too thought my code was not working, until I did a Re-Index and Push Settings.
I am glad you found it useful!

This is awesome! Thanks for these posts on Algolia. Definitely looking forward to more.

I do have one question though. Does each re-index operation from the wordpress plugin add to the Search Operations number in Algolia? I was tweaking around the code and did quite a few re-index operations. Later noticed that the search operations number in Algolia dashboard had gone up to 30k. Have you experienced something like this?

Hello Arjun
Thank you for your kind words. I am sorry I have not measured the impact of the re-index operations on the total Algolia usage. I think the indices get re-indexed automatically on any changes, so I am not sure why this code change would cause an extra increase.

Stay tuned for another post on how to style and code facets to InstantSearch in Algolia!

Leave a Reply

Your email address will not be published. Required fields are marked *