---
title: "How to Create Off Canvas WooCommerce Product Filter Menu in Elementor?"
url: https://theplusaddons.com/docs/create-off-canvas-woocommerce-product-filter-menu-in-elementor/
date: 2023-09-14
modified: 2026-04-10
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/09/How-to-Create-Off-Canvas-WooCommerce-Product-Filter-Menu-in-Elementor_-1024x536.jpg
word_count: 339
---

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

## 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.

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](/docs/wp-search-filters-widget-settings-overview/).*

***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](https://theplusaddons.com/elementor-listing//#search-filter-wgts?utm_source=tpae&utm_medium=docs&utm_campaign=text)

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](https://theplusaddons.com/wp-content/uploads/2023/09/off-canvas-popup-filter.gif)

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

![product listing search list](https://theplusaddons.com/wp-content/uploads/2023/08/product-listing-search-list.png)

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](https://theplusaddons.com/wp-content/uploads/2023/09/off-canvas-popup-filter-demo.gif)

Also, read [How to Create Horizontal WooCommerce Product Filter in Elementor](https://theplusaddons.com/docs//create-horizontal-woocommerce-product-filter-in-elementor/).

## Frequently Asked Questions

**Q: What should I do if the WP Search Filters widget isn't showing up?**
A: 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.

**Q: What is the best way to set the popup height and width for the filter?**
A: 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.

**Q: What happens if I forget to disable the On Click Link Popup Close toggle?**
A: 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.

**Q: How do I create a filter that allows users to select multiple options?**
A: 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.