How to Create Off Canvas WooCommerce Product Filter Menu in Elementor?

Updated on June 24, 2024 by Editorial Team
Table Of Content

Do you want to add an off canvas filter to your WooCommerce store? Adding an off canvas product filter can improve the user experience as users can focus on the products without any distractions.

By using the WP Search Filters widget with the Popup Builder widget from The Plus Addons for Elementor, you can easily create an off canvas product filter for your WooCommerce store.

To check the complete feature overview documentation of The Plus Addons for Elementor WP Search Filters widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To do this, make sure you’ve added some products to your WooCommerce store, then you have to use the WP Search Filters widget, the Popup Builder widget with the Product Listing widget.

Note: Make sure you’ve enabled WP Search Filters, Popup Builder and Product Listing widgets from The Plus Settings.

1. First you have to create an Elementor template with the WP Search Filters, then create all the required filters.

2. Add the Popup Builder widget on the page or template and go to Content > Popup Type choose Slide.

3. Then set the desired popup height, direction and width.

4. Then choose the Template option from the Content Type dropdown and from the Select Content dropdown, choose your Elementor template with the filters.

5. Select the appropriate trigger option from the Select Option dropdown.

6. To make sure the popup doesn’t close while applying a filter go to Extra Options and turn off the On Click Link Popup Close toggle.

Off canvas popup filter

7 Then add the Product Listing widget, and select Search List from the Product Listing Types dropdown.

Product listing search list

8. Then select the appropriate style and layout.

Now when you click on the popup trigger you should be able to see an off canvas popup with all your filters that you can use to filter products.

Off canvas popup filter demo

Also, read How to Create Horizontal WooCommerce Product Filter in Elementor.

Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]

    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website

    Related Docs