---
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-09-28
lang: en
author: "Aditya Sharma"
description: "On mobile and tablet widths, a full filter bar permanently on screen competes with the product grid for space. The WP Filters widget's Filter Button control adds a single toggle..."
image: https://theplusaddons.com/wp-content/uploads/2023/09/How-to-Create-Off-Canvas-WooCommerce-Product-Filter-Menu-in-Elementor_-1024x536.jpg
word_count: 281
---

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

## 

- WP Filters adds a Filter Button control that shows or hides the entire filter area on click, keeping the filter bar in its normal position instead of creating a separate slide-out drawer panel.
- The Plus Addons for Elementor Pro is required for WP Search Filters, and the widget is enabled from The Plus Addons > Widgets by searching for WP Filters and turning its toggle on.
- The setup uses Elementor, WooCommerce, and at least a few published products, then lets the user choose Icon or Image for the toggle button and place the icon Before or After the label.

On mobile and tablet widths, a full filter bar permanently on screen competes with the product grid for space.

The WP Filters widget's **Filter Button** control adds a single toggle button that shows or hides the entire filter area on click - collapsing it out of the way until needed.

For the full settings tour of the **WP Search Filters** widget, see [WP Search Filters Widget Settings Overview](https://theplusaddons.com/docs/wp-search-filters-widget-settings-overview/).

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/woocommerce-builder/ajax-filters/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Edition:** WP Search Filters is a **Pro** widget - it requires The Plus Addons for Elementor Pro to be installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **WP Filters** and turn its toggle on.- **Prerequisite:** [WooCommerce](https://wordpress.org/plugins/woocommerce/) installed and active, with at least a few products published.- One or more filter items already configured.

## Steps

With the WP Filters widget selected, open the **Filter Button** popover (labelled **Ajax Button** in the popover header) and turn it on.

![Filter Button popover turned on, with icon/image and position controls](https://theplusaddons.com/wp-content/uploads/2026/09/wp-search-filters-filter-btn-toggle.webp)

Choose **Icon** or **Image** for the toggle button's visual, and set **Icon Position** to Before or After the button's label.

![Filter area collapsed behind the toggle button, then expanded on click](https://theplusaddons.com/wp-content/uploads/2026/09/wp-search-filters-filter-btn-collapsed.webp)

## Settings Overview

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Filter Button | Adds a toggle button that shows/hides the whole filter area. | Off |
| Icon Position | Places the toggle icon before or after its label. | Before |

### Note

This is a show/hide toggle for the existing filter bar, not a separate slide-out drawer panel - the filter bar still renders in its normal position, just collapsed until the button is clicked.

## Related Docs

- [How to Create Horizontal WooCommerce Product Filter in Elementor?](https://theplusaddons.com/docs/create-horizontal-woocommerce-product-filter-in-elementor/)- [How to Create WooCommerce Filter Reset Button in Elementor?](https://theplusaddons.com/docs/create-woocommerce-filter-reset-button-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before creating an off-canvas WooCommerce product filter menu in Elementor?**
A: Elementor free has to be installed and active, WooCommerce has to be installed and active, and you need at least a few published products plus one or more filter items already configured. The WP Search Filters widget is also a Pro widget, so The Plus Addons for Elementor Pro must be installed and active. That setup matters because the filter button only controls an existing filter area, it does not create the filters from scratch.

**Q: Why use a toggle button for product filters on mobile instead of keeping the full filter bar visible?**
A: On mobile and tablet widths, a permanent filter bar competes with the product grid for space. The Filter Button control in the WP Filters widget solves that by collapsing the whole filter area until the user needs it. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this show and hide behavior inside Elementor, which keeps the layout cleaner on smaller screens.

**Q: How do I make the WooCommerce filter area hide and show on click?**
A: The WP Filters widget includes a Filter Button control that adds one toggle button for the entire filter area. In the widget settings, open the Filter Button popover, labelled Ajax Button in the popover header, and turn it on. That gives you a click-to-collapse pattern instead of leaving all filters permanently visible, which is useful when screen space is tight.

**Q: Is this an actual slide-out drawer or just a collapsed filter bar?**
A: It is a show and hide toggle for the existing filter bar, not a separate slide-out drawer panel. The filter bar still renders in its normal position and simply stays collapsed until the button is clicked. That distinction matters if you are expecting an off-canvas panel animation, because this setup is about saving space rather than moving the filters into a new container.

**Q: Should I use an icon or an image for the filter toggle button?**
A: The widget lets you choose either Icon or Image for the toggle button’s visual. It also lets you place that visual before or after the button label with Icon Position. For most layouts, that choice is about clarity on small screens: keep the symbol simple if you want fast scanning, or use an image only if it matches your design system better.

**Q: Where can I learn more about the WP Search Filters widget settings?**
A: The full settings tour is covered in [WP Search Filters Widget Settings Overview](https://theplusaddons.com/docs/wp-search-filters-widget-settings-overview/). This tutorial only covers the Filter Button behavior needed to create the off-canvas style menu. If you are also building related layouts, [How to Create Horizontal WooCommerce Product Filter in Elementor?](https://theplusaddons.com/docs/create-horizontal-woocommerce-product-filter-in-elementor/) and [How to Create WooCommerce Filter Reset Button in Elementor?](https://theplusaddons.com/docs/create-woocommerce-filter-reset-button-in-elementor/) are the closest companion docs.