WooCommerce Product Search - Building with Blocks - Search & Filter with the All Products Block

In this tutorial for WooCommerce, we create a new Shop page with a live search field and several product filters. We are using the exclusive blocks provided by the WooCommerce Product Search extension and the "All Products" standard WooCommerce block.

Our new Shop page is using a two-column layout, with a live search field and products displayed in the left column, along with several live product filters in the right column. The composition is fully block-based and uses a full-width page template.

The block used to display the products is the "All Products" block, a standard WooCommerce block that is integrated with the live search and filters provided by the extension. All other blocks used to compose the Shop page are blocks that come exclusively with the WooCommerce Product Search extension.

The tutorial shows how to create the Shop page from scratch, placing all blocks appropriately in the layout and configuring them to achieve a balanced design and easy user experience.

With all our blocks placed on the new Shop page, we proceed to try it out. We perform searches and apply filters, testing several combinations. The "All Products" block is always updated accordingly and swiftly shows the matching products.

Get the extension on Woo : https://woo.com/products/woocommerce-product-search/

Documentation : https://woo.com/document/woocommerce-product-search/