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.


Posted

in

by

Tags:

Comments

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

  1. vmihai Avatar
    vmihai

    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!

    1. Amit Ramani Avatar

      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!

  2. Arjun Avatar

    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?

    1. Amit Ramani Avatar

      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!

  3. Ali Avatar
    Ali

    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

    1. Amit Ramani Avatar

      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.

      1. Ali Avatar
        Ali

        It worked ! Thank you very much

Leave a Reply

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