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.
7 responses to “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!
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
Hello Ali
I am not 100% sure but I think if you replace Line 15 of the autocomplete.php :
`
`
with
`
`
Maybe it might work? I have not tried this, so I am not 100% sure whether this will work. You can try it.
It worked ! Thank you very much