1. Home
  2. Docs
  3. ProductX
  4. All Blocks
  5. WooCommerce Product Filter Block

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.

Adding Columns
Adding Columns

Add ProductX row/column block. And choose the 30:70 layout.

Adding Product Filter and Product Grid Blocks
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
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.

Adding or Removing Filtering Options
Adding or Removing Filtering Options

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
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.

Advanced Settings

In the advanced tab, you will get settings for the following:

  • General
  • Responsive
  • Custom CSS
  • Advanced
Block Advanced Setting
Block Advanced Setting


You can modify class ID, z-index, margin, padding, normal & hover colors, border, box shadow, and border radius from the general settings.

Advanced General Settings
Advanced General Settings


You will have the responsiveness settings for the blocks if you want to show the block on particular devices or not.

Use the toggle bar to enable the following options:

  • Hide On Extra Large
  • Hide On Desktop
  • Hide On Tablet
  • Hide On Mobile
Advanced Responsive Settings
Advanced Responsive Settings

Custom CSS & Advanced

You can manually add your custom CSS to modify your blocks in the custom CSS field. And in the advanced field, you can add custom CSS classes.

Advanced Custom CSS settings
Custom CSS and Advanced Settings

Here’s a quick demo of the Product Filter in Action:

Product Filter Front-end View
Product Filter Front-end View

Read Relevant Documentation

  1. Installing the Pro Version of ProductX
  2. Using the WooCommerce Builder
  3. How to Use the Product Sorting Functionality
Was this article helpful to you? Yes No