Product Search Widget
↑ Back to top
The WooCommerce Product Search extension features a new widget that provides instant search results as you type in its search field. You can use one or more in your theme’s sidebars.
To use the widget on your site, from your WordPress Dashboard go to Appearance > Widgets and locate the WooCommerce Instant Product Search in the Available Widgets section:
Click the widget, then click one of the sidebar options that appear below and then click Add Widget. You can also drag and drop the widget on your available sidebars.
Visit a page on your site where the sidebar appears and type in a keyword related to one or more of your products.
You will see the search results appear below the search field. In the example above for a site with randomly generated products, we obtain 4 results for our search and 5 matching categories.
Hint : You can use one or more widget in your sidebars – to control the conditions for when a widget should be shown, we recommend to use our free Widgets Control plugin.
To fine-tune the widget, click the widget after placing it in one of your sidebars and refer to the documentation related to the widget below.
Note that you can place more than one widget in one or more sidebars and that each widget can use its individual settings.
Widget Settings
↑ Back to top
- The Title field allows you to display a title above the search field.
- Search Results – You can determine where the search will try to find matches. This includes options to search in product titles, excerpts (i.e. a product’s short description), the page content of a product, related tags and a product’s SKU.
- Order by … The search results can be displayed in ascending or descending order of their date (when a product was created), the product’s title, the product’s ID or randomly.
- Limit – This determines how many results are displayed and the default is to display up to 10 results.
The search field will produce links to categories where products are found that match the search. Moreover, you can also include to display product thumbnails, descriptions and prices. These are the related options:
- Show category matches – If this is checked, links to categories that contain matching products are included.
- Category Limit – Combined with the former option, this limits the number of categories displayed. By default, the widget will produce links to up to 5 matching categories.
Further options allow you to control the search field’s behavior in more detail:
- Delay – This option determines how quickly the search will be launched. After you type something in the search field, the search is launched to check for results. If the field reacts too quickly, it will result in a rather odd experience for who is searching. The default value is 500 ms, i.e. half a second after you stop typing and the search begins.
- Characters – Here you can set the minimum number of characters for a search to start.
- Inhibit form submission … – If checked, pressing the Enter key will not submit the search form.
- Navigable results – With this enabled, it means that you can use the cursor keys to navigate through the search results.
- Placeholder – The Placeholder is some text that is shown when nothing has been input in the search field.
- Submit button – This allow you to show a Submit button.
- Submit button label – Combined with the former option, determines what text is shown on the Submit button.
- Dynamic focus – With this option enabled, the search results are shown or hidden when the search field gains or looses focus (gaining focus usually means when the cursor is blinking inside the search field).
- Floating results – This option sets whether the search results are shown “floating” below the search field. If enabled, the list of results will float above other content below the search filter. Otherwise it will make itself fit between the search field and whatever is below it (it will push the content below it).
- Auto-adjust results width – This will make the width of the search results list fit that of the search field to provide a coherent appearance.
An additional option is available if the WPML plugin is present:
- WPML Language Filter – Enable it to show results for the current language, disable it to include matches in all languages.