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

Updated onApril 10, 2026By

Key Takeaways

  • WP Search Filters widget from The Plus Addons for Elementor allows users to create an off canvas product filter for WooCommerce stores.
  • Popup Builder widget from The Plus Addons enables customization of popup height, direction, and width for the filter menu.
  • Product Listing widget must be set to Search List type to display filtered products in the off canvas popup.
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.

LIVE WIDGET LINK

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 Addons > Widgets

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.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the WP Search Filters widget isn't showing up?

If the WP Search Filters widget isn't visible, ensure that it is enabled in The Plus Addons settings. Navigate to The Plus Addons > Widgets and check if the WP Search Filters, Popup Builder, and Product Listing widgets are activated. If they are not enabled, they won't appear in your Elementor editor.

What is the best way to set the popup height and width for the filter?

When setting the popup height and width, consider the overall layout of your site and user experience. A common practice is to set the height to around 80% of the viewport height for a balanced look. Adjust the width based on your design, but ensure it doesn't overwhelm the screen, especially on mobile devices.

What happens if I forget to disable the On Click Link Popup Close toggle?

If you forget to disable the On Click Link Popup Close toggle, the popup will close when users click on a filter option. This can disrupt the filtering process, as users may not be able to apply multiple filters without reopening the popup each time.

How do I create a filter that allows users to select multiple options?

To create a filter that allows users to select multiple options, ensure you configure the filter settings in the WP Search Filters widget to enable multi-select. This feature enhances user experience by allowing them to refine their search results more effectively.

Last reviewed: April 10, 2026

Related Docs