The Filters Canvas module gives you a flexible way to display your product filters in a dedicated space, separate from the main product listing. Instead of placing filters in a sidebar, this module lets you show them in an off-canvas panel that slides in from the side – much like the mobile menu – or in a horizontal layout above the products grid.
This approach helps you keep the product archive clean and distraction-free, while still offering your visitors powerful filtering tools whenever they need them.
Activating the Module
To activate the Filters Canvas module:
- Open your WordPress dashboard.
- Click on Blocksy in the sidebar.
- Navigate to the Extensions tab.
- Locate the Shop Extra extension and click to expand it.
- Find Filters in the list and toggle it on.
Once the module is active, a new Filters Canvas panel will appear under Customizer → Product Archives. Additionally, a new widget area called WooCommerce Filters Canvas will show up under Appearance → Widgets, which you can populate with your desired filtering widgets.
Granular Controls
Controls for Design 1
Canvas Design
This setting lets you enable Design 1, which displays the filters inside an off-canvas panel. It behaves similarly to a mobile menu and slides in from the side of the screen when triggered.
Icon and Visibility Controls
Here, you can select the icon used for the toggle button that opens the Filters Canvas. You also get full control over where this button appears — desktop, tablet, or mobile.
Panel and Alignment Options
Choose the side from which the canvas slides in (left or right), and define the width of the panel. You can also set how the widgets inside the panel are aligned — top, center, or bottom.
AJAX Options
You can enable AJAX loading (with the Panel AJAX Reveal option) for the widgets inside the canvas. This can improve performance by loading them only when the panel is opened.
The Auto Close Panel option automatically hides the Filters Canvas after a filter has been selected, helping streamline the browsing experience. This setting becomes available only when AJAX Filtering is enabled from the Customizer → Product Archives panel.
Widget Area Source
Select which widget area should be displayed inside the canvas. This is useful when filters are shared between the main WooCommerce sidebar and the Filters Canvas, especially on mobile devices.
Controls for Design 2
Canvas Design
This option enables Design 2, which places the filters inside a horizontal panel above the product listing.
Icon and Visibility Controls
Here, you can select the icon used for the toggle button that opens the Filters Canvas. You also get full control over where this button appears — desktop, tablet, or mobile.
Panel Options
Set the height of the canvas and the number of widget columns to display. Each widget occupies one column.
You also have the option to keep the filters panel always visible on page load, eliminating the need for visitors to manually open it.
AJAX Options
You can enable AJAX loading for the widgets inside the canvas. This can improve performance by loading them only when the panel is opened.
Widget Area Source
Select which widget area should be displayed inside the canvas. This is useful when filters are shared between the main WooCommerce sidebar and the Filters Canvas, especially on mobile devices.