ProductX

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

WooCommerce Product Filter Block

***ProductX is becoming WowStore. If you see the new working interface of WowStore, then you can follow along – the working process for product blocks, starter templates, and features all work the same way as it did for ProductX. So, if you’re working with WowStore, you can follow the doc and use the instructions. Essentially, there’s no difference between WowStore and ProductX when it comes to using the product in general.

The WooCommerce Product Filter Block helps to add multiple options to any product blocks of WowStore. 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 Product Filtering Block

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

Go to the editor view of a page. For simplicity purposes, let’s add a row/column block and use the 30:70 layout.

add product filtering block from WowStore

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 to the page.
select product grid for the product filtering

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.

add or remove product filters

More Available Customization Options for the Product Filter

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

  • Changing the name of the filtering labels.
  • Changing colors and typography of filtering labels.
  • Enable/disable the 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 WowStore. Click here to learn more.

Advanced Settings

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

  • General
  • Responsive
  • Custom CSS
  • Advanced

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

Also, 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

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

Live View

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

WowStore product filtering

Read Relevant Documentation

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