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.
Add ProductX row/column block. And choose the 30:70 layout.
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.
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.
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
General
You can modify class ID, z-index, margin, padding, normal & hover colors, border, box shadow, and border radius from the general settings.
Responsive
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
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.
Here’s a quick demo of the Product Filter in Action:
