---
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-06-19
lang: en
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: 325
---

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

## 

- Utilizes the WP Search Filters widget and Popup Builder widget from The Plus Addons for Elementor to create an off canvas product filter for WooCommerce.
- Requires activation of WP Search Filters, Popup Builder, and Product Listing widgets from The Plus Addons to function properly.
- Involves creating an Elementor template with filters, setting popup dimensions, and configuring trigger options for user interaction.

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 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 it is installed and activated.***

[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 have added some products to your WooCommerce store. Then use the WP Search Filters widget, the Popup Builder widget, and the Product Listing widget.

> *Note: Make sure you have enabled WP Search Filters, Popup Builder and Product Listing widgets from **The Plus Addons **> **Widgets***

1. First, create an Elementor template with the WP Search Filters widget and add all the required filters.

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

3. 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 does not 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. 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. Select the appropriate style and layout.

![off canvas popup filter demo](https://theplusaddons.com/wp-content/uploads/2023/09/off-canvas-popup-filter-demo.gif)

When you click on the popup trigger, you will see an off canvas popup with all your filters that you can use to filter products.

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