WooExperts Banner on Doc Pages

  1. Documentation /
  2. WooCommerce Product Search /
  3. Version 1.x and WooCommerce 2.x /
  4. Shortcodes

Shortcodes

The [woocommerce_product_search] shortcode is used to embed a search facility anywhere on a page. It shows the search field that allows visitors to obtain results showing products they look for almost instantly.

Usage

↑ Back to top
To use the shortcode, simply place this on a page: [woocommerce_product_search] This will provide the search field using the default settings.

Examples

↑ Back to top
We recommend the following procedure to try it out on a new page:
  1. From your WordPress Dashboard go to Pages > Add New.
  2. Place the following shortcode on the page: [woocommerce_product_search] Please make sure that the spelling is correct, all letters must be in lower case.
  3. Click Publish to save the page content and publish the page.
  4. Now click View Page which will show you the search field on your newly created page. If the search field does not appear, or if the shortcode appears to be without effect, make sure that you have activated the WooCommerce Product Search plugin.
  5. To test the field, at least one product must be published in your store. Start typing a search keyword, search results will show up below the field after you stop typing for an instant.
To refine the settings used, please refer to the advanced configuration options and the shortcode attributes documented below. Here is another example – this includes advanced options from those described below, to show the description and the price:

[woocommerce_product_search show_description="yes" show_price="yes"]

If you embed this on a page, the field will render as usual but the search results will include a description of the products found and their price. The following example will also search in SKUs, show the product’s price and up to 20 results. It will not show any categories:

[woocommerce_product_search sku="yes" show_price="yes" limit="20" category_results="no"]

As you can see, it’s very easy to combine several options to produce a search field that is suitable for general or specific searches.

Advanced Options

↑ Back to top
The following attributes can be used to fine-tune the search facility:
  • order – use "ASC" or "DESC" to show search results in ascending or descending order; descending is the default
  • order_by – the criteria used to order the search results; possible values are "date", "title", "ID" and "rand"; the default order is by date
  • title – whether to search in titles; enabled by default, "yes" or "no"
  • excerpt – whether to search in excerpts; enabled by default, "yes" or "no"
  • content – whether to search in content; enabled by default, "yes" or "no"
  • tags – whether to search in tags; enabled by default, "yes" or "no"
  • sku – whether to search in product SKUs; disabled by default, use "yes" to enable search in SKUs, or "no" (used by default) to disable it
  • limit – maximum number of search results to show, defaults to 10 results
  • category_results – whether to show category result suggestions; enabled by default, "yes" or "no"
  • category_limit – maximum number of category results to show, the default is 5
  • product_thumbnails – whether to show product thumbnails; enabled by default, "yes" or "no"
  • show_description – whether to show the product short description; disabled by default, "yes" to enable or "no"
  • show_price – whether to show the product price; disabled by default, "yes" to enable or "no"
  • placeholder – the placeholder text shown in the empty search field
  • no_results – the text to show when there are no search results; empty by default
  • blinker_timeout – this determines the maximum amount of time during which the blinker is displayed. The blinker is the small indicator displayed inside the search field which appears after you stop typing and is shown until the search results are obtained. If the blinker timeout is reached, it will disappear even though no search results have been obtained yet. The value must be specified in milliseconds and the default is 5000, meaning that if after 5 seconds no search results are obtained yet (due to a slow or lack of response from the server), the blinker will disappear. To turn this option off, indicate 0, i.e. blinker_timeout="0" will let the blinker do it’s thing until eternity unless eventually some search results come in.
  • delay – the delay in milliseconds that determines when to start launching the search request to the server after the visitor stops typing. The default is 500 so that half a second after the user stops typing, the search request is launched to the server. The minimum accepted value is 250.
  • characters – the minimum number of characters required to start a search. The default is 1 so that the search is launched even with a single character.
  • dynamic_focus – whether to show/hide the search results when the search field gains/loses focus, i.e. roughly when the visitor is using or not the search field; enabled by default, "yes" or "no"
  • floating – whether the search results should be floating above the content; enabled by default, "yes" or "no"
  • inhibit_enter – whether to inhibit the Enter key when pressed in the search field so that the visitor is not taken to the search results page; disabled by default, "yes" or "no"
  • submit_button – whether to show a submit button; disabled by default, "yes" or "no"
  • submit_button_label – the label shown on the submit button
  • navigable – whether to allow the visitor to use the cursor keys to navigate through the search results and use the Enter key to visit a result; enabled by default, "yes" or "no"
  • auto_adjust – whether to adjust the width of the search results automatically to the width of the search field; enabled by default, "yes" or "no"
  • wpml – this option works with WPML, the WordPress Multilingual Plugin and determines whether the search results are filtered by the current language; disabled by default, to enable use "yes" or use "no" to disable