WooCommerce Product Search – Building with Blocks

Using the exclusive blocks provided by the WooCommerce Product Search extension, we show how easy it is to set up live search and filter blocks for the shop.

The search engine is available exclusively on Woo.com and is an essential extension for every shop powered by WooCommerce.

In this video tutorial we cover the steps described below, to end up with all the blocks needed to provide an easy to use live search and filtering experience to customers.

First, we install the Storefront theme. We use this popular theme because it is the standard for WooCommerce and supports widgets in sidebars. In our tutorial, we will use blocks provided with the search engine extension and add them as widgets to the theme’s main Sidebar.

Next we go to Appearance > Widgets and remove the default widgets in the Sidebar, as those are irrelevant for our Shop.

With a clean Sidebar, we now add new blocks that will help customers to find products easily. All the blocks that we add here are provided exclusively with the WooCommerce Product Search extension:

• A live search filter field.
• A live filter for product categories.
• Two live filters for product attributes, one for colors and another for sizes.
• A live price slider.
• Live filters for products in stock and for products on sale.
• A live product rating filter.
• A live reset element that allows to clear all live filters.

You will find detailed descriptions of all available blocks on the Blocks pages of the extension’s documentation.

With this suitable set of blocks placed in the theme’s Sidebar, we proceed to the Shop page. There we try out several searches and combinations of filters. We can see how the products on the Shop page are updated automatically according to the criteria chosen by the customer.

The unique design of the extension makes sure to provide sound and complete results. The solution is highly scalable as it is powered by exclusive technology that has been engineered specifically for shops powered by WooCommerce.

Please use the comments section if you have questions.