Real-Time Search

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):

Merchant's Real-Time Search module on the frontend of a WooCommerce store, screenshot

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:

Real-Time Search module's location in the Merchant dashboard, annotated screenshot

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.
Real-Time Search module settings page, screenshot

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:

Merchant's Real-Time Search module, Enable button, screenshot