WooCommerce Product Filter Block

The WooCommerce Product Filter Block helps to add multiple options to any product blocks of ProductX. The filtering options include filter pricing, filter by category and sub-category, filter by rating, and filter by attribute. Now let’s see how you can use the filtering block.

Adding Filter Block with Product Block

ProductX filtering blocks work dynamically with any product blocks. It can be added to any WooCommerce store page where you want to display products.

First, let’s add a column block of a 30/70 ratio. Add the product filter block on the right side and a product block on the right side. However, you can also display the filtering option on the right side with a 70/30 column block.

Adding Product Filter and Product Grid Blocks

Connecting Filter Block with the Product Block

Now, you have connected the filter block to the product block, otherwise, it will not work. For that:

Click on the Grid selection option from the product filter setting.
Select the product grid from the dropdown that you have added on the page.

Connecting Filter Blocks with Product Grid Blocks

Add or Remove Filtering Options

You can add or remove your desired filtering options from the filter data selection section. If you want to remove any option just click on the delete button. And, if you’re going to add an option click on the add new field button, then select your desired filtering option from the drop-down.

More Available Customization Options for the Product Filter

Besides adding or removing filtering options, there are more customization options available. That include,

Changing the name of the filtering labels.
Changing colors and typography of filtering labels.
Enable/disable filtering toggle.
Changing colors, border radius, and padding of the search style.

Product Filter Additional Customization Options

Note: While Adding the Product Attribute (Colors) Filtering option you may not see the actual colors. You may only see the name of the colors. If you want to display colors instead of the name of the colors, you have assigned them from the product attributes section. For that, you have to use the Variation Swathes Addon of ProductX. Click here to learn more.