WooCommerce Product Search comes with several shortcodes that you can use to insert live search and live filtering facilities inside pages and posts. It also provides shortcodes to build dynamic shop pages. The search engine also provides equivalent Blocks.
- [woocommerce_product_search] — shows a live Product Search Field that shows results while the customer types.
Use this shortcode to show an input field which displays matching results while the customer types. By default, it displays the product titles, a short description on each entry, the prices of the products and it also shows the “Add to Cart” buttons for each entry. You can use it anywhere on your site and allow your customers to search and add products to the cart with it easily.
- [woocommerce_product_filter] — shows a live Product Search Filter.
- [woocommerce_product_filter_attribute] — shows a live Product Attribute Filter.
- [woocommerce_product_filter_category] — shows a live Product Category Filter.
- [woocommerce_product_filter_price] — shows a live Product Price Filter.
- [woocommerce_product_filter_tag] — shows a live Product Tag Filter.
- [woocommerce_product_filter_rating] – shows a live Product Rating Filter.
- [woocommerce_product_filter_sale] – shows a live filter for Products On Sale.
- [woocommerce_product_filter_stock] – shows a live filter for Available Products.
- [woocommerce_product_filter_reset] – shows a button to clear all live filters.
Use these filters in conjunction with the [woocommerce_product_filter_products] shortcode which displays the products and updates dynamically while the customer types in the search filter, chooses a range of prices or selects a term from the attribute, category or tag filters.
- [woocommerce_product_filter_products] — shows the products like on the shop page and works together with the live Product Filters.
- [woocommerce_product_filter_context] – determines the current filter context to limit the products displayed with the [woocommerce_product_filter_products] shortcode and related live filters used.
Please visit their documentation pages for detailed information about each shortcode.
The options of these shortcodes are very similar to those described for the Widgets – giving you the option to choose a widget or a shortcode depending on which is more suitable. If you are a developer and familiar with theme templates, the plugin also offers you the same features through its API.
The shortcodes can also be used with the block editor introduced in WordPress 5.
In the following video, you can learn how to build a custom shop page using blocks and the the shortcodes provided by the extension.