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.

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.

Posted

April 23, 2020

Wordpress

Amit Ramani

Tags:

Comments

7 responses to “Woocommerce Algolia: How To Add Price (and other fields) to AutoComplete DropDown”

vmihai
April 24, 2020
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!
Reply
1. Amit Ramani
  April 26, 2020
  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!
  Reply
Arjun
May 14, 2020
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?
Reply
1. Amit Ramani
  May 14, 2020
  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!
  Reply
Ali
October 15, 2020
Hello Amit,
Thank you very much for this article, it worked very well for me.
Could you tell me how to replace the sign “$” (dollar) by the sign “€” (euro)?
Thanks again,
Ali
Reply
1. Amit Ramani
  October 17, 2020
  Hello Ali
  I am not 100% sure but I think if you replace Line 15 of the autocomplete.php :
  `
  ${{{ data.price }}}
  `
  with
  `
  €{{{ data.price }}}
  `
  Maybe it might work? I have not tried this, so I am not 100% sure whether this will work. You can try it.
  Reply
  1. Ali
    October 18, 2020
    It worked ! Thank you very much
    Reply