WooCommerce Product Search - Building with Blocks - Product Catalog - Product Collection
In this tutorial, you will learn how to customize the Product Catalog template of your WooCommerce shop.
Get the extension on WooCommerce : https://woocommerce.com/products/woocommerce-product-search/
Documentation : https://woocommerce.com/document/woocommerce-product-search/
WooCommerce Product Search has exclusive new blocks with live search and filters. We are going to add several blocks to the Product Catalog template, this will allow customers to find products very easily.
Under Appearance > Editor, we locate the Product Catalog template, this is used for the Shop. I will add several blocks and rearrange things a bit. Locate the template and click it. Now we can customize it.
The default template simply displays the products using the Product Collection block - this is a standard WooCommerce block.
The customized layout is going to be based on two columns, so I first need to add a Columns block.
We are going to place search and filter blocks in the column on the left side and show the products on the right side.
Let's move that Product Collection block into the right column.
We put a live search field and filters into the left column. These blocks come exclusively with the WooCommerce Product Search extension ...
On top, I am adding a live search field where customers can type what they are looking for.
Below that, we'll show the product categories. Customers can select a category to see relevant products. Of course they can combine that with the search and the other blocks that we will add now.
Our shop has a couple of useful product attributes, one for colors and the other for sizes. I am adding two product attribute filter blocks for those.
A price filter comes in handy, so I add one right here.
Another block allows customers to look for products that are on sale.
This next filter helps to find products which are currently in stock.
A rating filter comes next, helping customers to find products according to their reviews.
Our last block allows to reset all applied filters.
Alright! Our customized template is ready. Let's give it a try in the Shop!
As you can see, our much improved template is already in action.
Here we see searches and filters working together, just as your customers would use them.
All those filters can be combined as desired, and they will bring up the appropriate matching products.
As is demonstrated when trying out several combinations, our customer can find matching products quickly.
You have learned how you can customize the Product Catalog template for your shop, in just a few minutes.
The WooCommerce Product Search extension is very easy to use. It gives your shop the clear benefit of helping customers to find products quickly and effortlessly. An important tool that can help to increase sales. This is an essential extension for every shop that is based on WooCommerce.
The WooCommerce Product Search extension is sold exclusively on WooCommerce.com!
Thanks for watching and have fun selling with WooCommerce and the search engine WooCommerce Product Search!
Get the extension on WooCommerce : https://woocommerce.com/products/woocommerce-product-search/
Documentation : https://woocommerce.com/document/woocommerce-product-search/
30
views
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/
6
views
WooCommerce Product Search - Building a Shop page with Blocks
Here we create a new Shop page using the exclusive blocks provided by the WooCommerce Product Search extension.
We show how to create a two-column layout that includes a live search field and several live filters. The new Shop page allows customers to find desired products quickly and easily, we try out several searches and filter combinations.
In this tutorial, we use the new Twenty Twenty-Four theme that supports the latest site editing features with WordPress.
The search engine is available exclusively on woo.com and is an essential extension for every shop powered by WooCommerce.
Get it on Woo : https://woocommerce.com/products/woocommerce-product-search/?aff=7223&cid=632717
Documentation : https://woo.com/document/woocommerce-product-search/
56
views
WooCommerce Product Search - Building with Blocks - Storefront
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.
Get it on Woo : https://woocommerce.com/products/woocommerce-product-search/?aff=7223&cid=632717
Documentation : https://woo.com/document/woocommerce-product-search/
80
views