How to Set Search Suggestions for WooCommerce Website
Discover how to set search suggestions for the WooCommerce website manually or via the Search Suggestions widget.
Before you start, check the tutorial requirements:
- Elementor (Free version)
- JetSearch plugin installed and activated
- WooCommerce plugin installed and activated
Using the Search Suggestions functionality, you can place the Search Suggestion widget on the WooCommerce website. The widget outputs a standard search form. When you start entering text in the search field, the widget will look for matching search queries in the database on this website and display a list of queries containing the entered text, i.e., suggestions. To manage the suggestions, you can edit or add them manually on the Search Suggestions dashboard.
Adding Suggestions Manually
Follow the WordPress Dashboard > JetPluginsSettings > JetSearch > Suggestions path.
The Suggestions dashboard displays the search queries (suggestions) list formed from previously entered real search queries or those manually entered by the site administrator.
To add suggestions manually, hit the “Add New” button at the top of the page.
Each suggestion can have one parent. If the entered suggestion has a parent, then this parent item will supersede that suggestion, and the sorting will be performed considering the parent’s Weight. This logic is responsible for typing errors; for example, there are “iphone” and “ihpone” suggestions. We have assigned “iphone” as the parent of “ihpone.” Now if the user starts typing “ihp” instead of “iphone,” they will be shown the parent suggestion, which is “iphone.”
I entered the “sweater” Name and left the Parent field empty. Then, I pushed the “Add New” button.
It is displayed now in the list and has the “Unassigned Suggestion” Type.
I hit the “Add New” button again and added the misspelled “sweeter” Name. As the Parent,I picked the “sweater” suggestion from the drop-down menu.
The new suggestion is also shown in the list with the “Child Suggestion” Type since I added a parent to it.
The “sweater” suggestion, in turn, obtained the “Parent Suggestion” Type because the child was assigned to it.
Add as many parent and child suggestions as you need. Learn more about the Search Suggestions Settings from this overview.
Adding the Search Suggestions Widget
The Search Suggestions widget can be added to a page (e.g., “Home” page), Header, etc. You can create a Header with the JetThemeCore WordPress plugin. To learn more, proceed to the How to Create a Custom WordPress Header tutorial. Open the page or Header in the Elementor editor.
Drag-n-drop the Search Suggestions widget to the Elementor editing page.
Customize the widget settings according to your needs. Learn more from the Search Suggestions Widget Overview.
Click the “Update” button and proceed to the front end.
When you click on a selected suggestion, you will be redirected to the corresponding search results page.
To learn how to create the search results page with the JetThemeCore plugin, proceed to the How to Create an Archive Template to Display the Search Results tutorial.
When you enter the misspelled suggestion, the search bar shows the parent suggestions.
Now, you can enter several more suggestions. Then, return to the WordPress Dashboard > JetPluginsSettings > JetSearch > Suggestions page.
Editing the Suggestions
Two new “jeans” and “jean” suggestions appeared in the list after I entered them into the search bar. Let’s click on the pencil-shaped icon near the “jean” suggestion.
In the Edit Suggestion pop-up, you can rename a suggestion, change its weight (the bigger the weight, the higher the suggestion in the list), and assign or unassign a parent.
That’s all. Now you know how to set search suggestions for the WooCommerce website manually or via the Search Suggestions widget.