How to customize the WooCommerce Product Catalog Template with Search and Filter Blocks

—

by

Kento
in ,

In this tutorial, you will learn how to customize the Product Catalog template of your WooCommerce shop.

This default WooCommerce template uses the Product Catalog variation of the Product Collection block and is used for the Shop page. We extend the template with several blocks that allow to search and filter the products, making it easy for customers to find what they want.

You will find the Product Catalog template when you go to Appearance > Editor > Templates on your WordPress dashboard, you can locate it easily among the available templates using the search field. Here is a preview of our customized template as shown in the editor:

With our customized template, the shop will look like this:

For this tutorial, we have created a child theme based on the Twenty Twenty-Four standard WordPress theme: Twenty Twenty-Four WPS

The following is a transcript of the video tutorial, it’s easy to follow. If you have any questions, let us know in the comments below.

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!

Resources

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Share