This guide will take you through the steps involved in setting up Search & Filter with the WooCommerce Products Query block.

The Products Query block is still in beta (as of writing) which requires additional steps to get setup.

Prerequisites

• Install the WooCommerce Blocks plugin.
• Create a new page for adding the products + filters.

Guide

1. Add the WooCommerce Products (Beta) block

This should add your products to the current post:

2. Add a Search Field to your page

Our fields are highlighted in blue in the block inserter, you can find them in the inserter by search for “field”:

Once added it should look something like this:

3. Create a query integration

Once you’ve added the search field to you page, you’ll notice an option to link a query the inspector. Select add new to begin linking the field to query.

Enter a name for the integration, we’ll use “Products Page”.

4. Configure query integration

Once you’ve created a query, the Query Sidebar will be automatically opened.

While there is a lot going on here, we’ll focus on only the integration settings.

Ensure that you setup the following:

• Integration type: Single Post / Page / CPT
• Single Post / Page / CPT: Current post (dynamic)
• Query: WooCommerce Products block

Then make sure you press update in the sidebar (not the block editor toolbar).

5. Add a submit button

While the search input alone will already work (pressing enter will submit the search), its a good idea for usability to add a submit button.

Add a submit button by adding a control field:

Ensure that it is set to use the Products Page query:

And ensure the submit control type should already be preselected:

6. Publish and test

Update or publish your page and preview on the frontend of your site, it should look something like this:

7. Adding more fields

There are plenty of product attributes we might want to use, for now we’ll add a product category field.

Choose the filter field block:

And configure the following settings in the inspector sidebar:

• Query integration: Products Page
• Data type: WooCommerce
• Data source: Categories
• Input type: Select
• Placeholder text: Choose a category
• Show label: off
• Label: Product categories

Update the page and check the frontend and you can see the new product category filter ready to use:

---

That’s it for now! It’s worth exploring the data types for WooCommerce in your filter fields as you’ll be able to filter by all sorts of attributes.

Use columns and rows to create more complex layouts.