By default, WooCommerce provides a very simple search solution, without live product search or SKU search.
Merchant’s Real-Time Search module helps visitors instantly find the products they’re looking for. It displays a well-designed AJAX search results modal below the search bar, which shows live search suggestions.
This is what it looks like on the frontend of a WooCommerce store (created with our Botiga theme):
Now, let’s see how to enable and configure this module.
1. Open the Real-Time Search Module
Open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.
Under the Improve Experience heading, click the Real-Time Search module to open its settings page:
2. Configure the Real-Time Search Module
Before adding the real-time search feature to your site, it’s recommended that you configure its settings.
In the Settings section on the module’s page, you get access to the following options:
- Results Amount Per Search – Here, you can set the number of products shown inside the search results modal.
- Results Description – Here, you can choose whether you want to display the Product description or the Product short description field of the WooCommerce products that appear in the search results modal.
- Results Description Length – Here, you can set the number of words of the product descriptions shown in the search modal.
- Results Order By – This setting allows you to decide if you want to order the search results by product name, published date, modified date, random, or product price.
- Results Order – Here, you can choose whether you want to show the products in ascending or descending order.
- Results Box Width – This option lets you set the width of the search results modal in pixels.
- Display Categories – This checkbox allows you to show product categories among the search results if the search term matches a category name.
- Enable Search by SKU – When this option is checked, the module will return search results based on both product name and SKU (stock keeping unit) number.
Once the settings are configured, click the Save button in the top-right corner of the page.
3. Enable the Real-Time Search Module
If you’re happy with the design, click the Enable button to activate the module:
