You can display WooCommerce products filter in the three easiest way
- Shortcode
- Gutenberg Block
- Elementor Widget
- Bricks Builder Widget
Required Plugins
You will need only 2 plugins to add category-based product filtering options in your online store. These are:
- WooCommerce
- Filter Plus
Install these plugins and follow the process below.
Shortcode
You can easily show Woocommerce product filter using shortcode. For this, Navigate to Filter Plus > Filter Sets > WooCommerce Filter.There, select your template and product categories first. Only the products with your selected categories will be displayed on your product page. Then, select the additional options you want to display in the product filtering section.
Create a new page or open an existing page first. Then, insert the Shortcode block on your webpage. Then, paste the previously copied shortcode from the Filter Plus plugin. That’s it! Save the page, and your task is done!
Gutenberg Block
You can also add the filtering options using the dedicated “WooCommerce Product Filter” block. Insert the block and make the required customization from the right panel.
You can select the template, choose product categories, and add or remove filtering options right from there. Once you are done editing, publish the page.
Elementor Widget
Filter Plus has an Elementor widget too. So, if you are designing your online store using Elementor, you are also covered. From the Elementor widget panel, select the “Woo Product Filter” widget and use it on your webpage.
By the way, you can also customize the template right from the Elementor panel. The customization panel looks like this:
Bricks Builder Widget
You will need to active Bricks Builder Theme for category-based product filtering options in your online store.
- Create A page and Go to Edit with Bricks
- Select WooCommerce Product Filter and Set in your own way
Final Preview
Here’s the final preview of the category filtering in WooCommerce.
