With the WooCommerce Product Filter plugin you can allow customers to find easily and fast products in your shop. After plugin activation you can see “Woo Product Filters” on your dashboard where you can create your filter and make requiring settings.
Before starting please make sure that you have the following requirements on your site:
- WooCommerce Plugin – Installed and activated.
- Products with category and attributes, tags, price, etc.
This is necessary, because all the filter functions are related to the product category, tags, attributes, price, atc, that you’ve set.
After creating the filter template you can add a Filter in these ways:
– Using a shortcode
– Using a Widget
– Using Elementor
– Using PHP
The shortcode
Copy Shortcode from filter settings and paste it to your website content.
For a shortcode, it doesn’t really matter on what page and where you add it, it will display the filter in this place ignoring almost all restrictions, except that the place where it is added should allow it to initialize.
But, we have added the ability to limit the shortcode to a specific (selected) type of pages if you activate the “Display On Pages Apply For Shortcode” option.
Then the Product Filter shortcode will display the filter you created on the appropriate post/page using the settings you tuned in this filter.
Display Widget
In case you are utilizing Product Filter in your internet store sidebar, then you can use the Product Filter Widget.
To display the Product Filter on a sidebar using the widget, go to the WP Admin > Appearance > Widgets.
Find the section for adding widgets to the Sidebar (or another place if necessary).
Click the Plus icon in the middle, in the text search type “Filter”. A list of widgets related to Filters will appear, select WBW Product Filter.
Once the filter widget is inserted into the sidebar section, select which of your filters you want to display.
Click the drop-down menu inside the widget and select the appropriate filter from the list of filters you previously created.
Click the Update button in the upper right corner of the screen to save your changes.
Through Elementor interface
WBW Product Filter is integrated with one of the best visual website editors Elementor. This extension allows you to quickly and without programming skills create quite complex and professional-looking pages using drag and drop technology.
We have added a widget of our plugin to Elementor so that you can add and configure the Product Filter to your site without leaving the page editor.
It works simply, while in page edit mode, type Filter in the Widgets search box.
You will see a widget called Woofilters, add it with your mouse to the desired place on your page.
After this, the widget settings menu will open and you will be asked to Create a new filter or Select a previously created one.
If you select Create new, a menu will open in the widget settings where you can add and configure all the necessary filter sections.
Using PHP
Filter PHP code can be inserted at any place of the page code – to display exactly in this place, for example in the header or footer of the page.
To get this code, select Filter PHP Code from the drop-down menu at the top of the Filter editor.
This code can be embedded, for example, into page templates that do not have space for a sidebar or filter, thus bypassing the limitations of the design theme.
Here are few examples of how to embed a PHP shortcode for a product filter in a WooCommerce page template:
1. Embedding in a WooCommerce Template (e.g., archive-product.php)
This code adds the filter before the product list:
<?php
// Insert the shortcode before the product list on the catalog page
echo do_shortcode(‘‘);
// Display WooCommerce products
if ( woocommerce_product_loop() ) {
woocommerce_product_loop_start();
while ( have_posts() ) {
the_post();
wc_get_template_part( ‘content’, ‘product’ );
}
woocommerce_product_loop_end();
} else {
do_action( ‘woocommerce_no_products_found’ );
}
?>
2. Embedding in functions.php Using a Hook
If you want to add the filter to the shop page via functions.php, you can use the woocommerce_before_shop_loop hook:
function add_custom_product_filter() {
echo do_shortcode(‘‘);
}
add_action(‘woocommerce_before_shop_loop’, ‘add_custom_product_filter’);
This code will insert the filter before the product list on the shop page.
These examples will help you integrate the filter into WooCommerce templates in a convenient way.