In this article we will look at how to add the autosuggest functionality to your WordPress search widgets. We will use the Smart WooCommerce Search plugin to make our job easier, but don’t let the name fool you. It’s not only for WooCommerce 🙂

This plugin is also recommended and used in our WoonderShop theme — Your Ultimate WooCommerce Theme to Grow Any e-Commerce Business.

We want to enhance the normal WordPress search widget so that it shows us the results while we type in the search string. Here is a preview of what we want to achieve.

We’re in luck, because the Smart WooCommerce Search plugin will allow us to do that very easily. All we have to do is install, activate and configure the plugin.

So, install the Smart WooCommerce Search plugin from your WP dashboard and activate it. You will see a new WP dashboard menu item called “Smart Search”. Click on it and you will be taken to the Smart Search settings for the Default WordPress search widget. By default, the smart search will be enabled and it will also have good default settings, so you might not even need to change anything.

In our WoonderShop theme, we have changed only the “Items to search through” tab settings, by setting the autosuggest, to display only products and to search some additional product fields:

That’s it, your WP search widgets now have the autosuggest feature!

PS: For full plugin documentation, visit: https://yummywp.com/docs/smart-search/