YITH WooCommerce Ajax Search allows adding a search bar to your website to let users search via Ajax for specific content in your website through posts, pages, and products.
Please note: for the plugin to work properly, it is essential for the REST API not to be blocked. If you do not want to give full REST API access, the ywcas/v1/ endpoint must be accessible.
We recommend following the steps in this guide to configure the plugin based on your needs.
The Search stats section in the plugin panel is where you can find all the statistics related to the Top searches (the most popular searches), Top clicked products (the products with the most clicks from the search results), and Searches with no results (the searched made by users that produced no results).
Tip about Searches with no results: the words listed in this stat can be useful and taken into account when configuring the synonyms words.
If you need to monitor statistics for a specific time interval, you can use the Filter by date option.
To reset the filter, click on the Reset button.
At the bottom of each statistic, you will find a ‘View all‘ link that allows you to access the table showing each query/product and its number of searches/clicks. From this table, you can also filter the statistic by date.
The plugin is ready to use with the block editor. When creating a new post or page, you can find the YITH blocks: Classic search and Overlay search. You can add them to your page with a simple click.
When selecting Classic search, you can choose the input size from Small and Large. This block includes 3 other blocks that we will analyze as follows:
This is the block that manages the search field.
By selecting this block, you will be able to configure the following settings:
Icon + text example
This is the block that manages the search results shown when found.
By selecting this block, you will find 3 additional blocks (Related categories block, Product results block, and Related posts block) to configure the following settings:
Related categories example
2. Products results block: this is the block that shows the products found as search results through which you can set:
Info to show example
Related posts example
This is the block that manages the search field when still empty.
By selecting this block, you will find 2 additional blocks (Search history and Popular searches block) to configure the following settings:
Please note: the search is registered only if the user visits the product page.
2. Popular searches block: this is the block that shows the most popular searches made by all the users through which you can configure the following settings:
Popular searches example
When selecting Overlay search, you will be able to set 2 additional blocks to manage the settings of the search icon and overlay content.
This block adds the search icon that will trigger the overlay when clicking on it. You can set the color and color hover of the icon through the related options.
Icon on the frontend
This block allows managing the overlay when users click on the search icon. It includes 3 other blocks that we will analyze as follows:
This is the block that manages the search field.
Example
This is the block that manages the search results shown when found.
By selecting this block, you will find 3 additional blocks (Related categories block, Related posts block, and Overlay product results) to configure the following settings:
Example
2. Related posts block: this is the block that shows the related posts through which you can set the following options:
Example
3. Overlay products results block: this is the block that shows the products found as search results through which you can set:
Example
This is the block that manages the search field when still empty.
By selecting this block, you will find 2 additional blocks (Search history and Popular searches block).
Please note: the search is registered only if the user visits the product page.
2. Popular searches block: this is the block that shows the most popular searches made by all the users through which you can configure the following settings:
Examples
Start configuring the plugin’s global options from the section General options. Here, you will find different sets of options related to:
By enabling this option, when users start typing a word in the search field, the plugin will show possible matching results.
You can define the minimum number of characters that will trigger the autocomplete. In the example below, by typing bla, the results shown have black as a correspondence.
In this section, you can decide the behavior related to variable products and out-of-stock products.
In this section, you can enter specific keywords or popular searches to show in the search results. In this way, you can, for example, highlight products you want to push to be purchased or suggest products most commonly searched by other users.
Users might mistype a word when searching for products and this will prevent them from getting results. In this case, to help them get the expected results, you can then enable the option Enable fuzzy strings matching and define the level of matching (we recommend setting the value to 50% to keep the search closer to the relevant word).
Additionally, through the Synonyms option, you can create one or more lists of synonyms (single words or phrases, comma-separated) so that, when users enter an equivalent word among those specified in your lists, they will get the products they are looking for more easily.
This is the section where you can choose the fields that will be involved during the search. To add a new field, click on the Add field button.
Now, you can select and extend the search to the following fields:
In the Search index section, you can set how often and the time for the indexing of fields to be executed.
From the section Boost results > Boost rules, you can create rules to increase the visibility of your products in search results. Click on Create Rule to start configuring options and conditions for products to get a higher visibility score and, as a consequence, show more in search results.
Example
We have created a rule with categories (Shoes and Woman) and price conditions to boost products with prices higher than €30. We want the rule to apply when all the conditions match.
When users execute their search, for example, to search for black products, the results will show as follows.
From the section Boost results > Boost products, you can create rules to increase the visibility of specific products in search results.
Click on Choose product to start configuring a default value for products for which you want to get a higher visibility score and, as a consequence, show more in search results.
From the modal, you can either search for a product in the dedicated field or select them from the products list.
Enter a value between 0.1 and 50 to define the visibility multiplier for the products through the option Boost value. A higher value will increase the products’ visibility.
Example
Suppose we want to promote the gold products first among the search results when users search for a pair of earrings on our site. To achieve this, we will select gold earrings among the products and set their boost value to the maximum (50).
This will ensure that they are shown first in the search results, as shown in the image below.
If you don’t use the blocks editor, go to the Search shortcodes section where you can find the default shortcode that you can customize as you want. You can also create other shortcodes by clicking on Add new shortcode and configure the following settings:
In the Customization section, you can set the text and background colors of on-sale, out-of-stock, and featured badges and the background color of the related content.
To add the search form through the widget, click on “Appearance -> Widgets” and add the Classic Search or Overlay search block. You can read more about the block options on this page.
If you are not using a block editor, instead, and need to use the legacy widget, select the YITH WooCommerce AJAX Search widget to the sidebar as shown in the image below.
The widget allows you to add a title and choose one of the Search shortcodes that you can create from the “Search Shortcodes” section in the plugin settings. For each shortcode, you will be able to customize the way the search form will be displayed.
Please, refer to this page for more details about how to create and customize a preset shortcode.
