Filters Canvas

Activating the Filters and Filters Canvas area.

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:

  1. Open your WordPress dashboard.
  2. Click on Blocksy in the sidebar.
  3. Navigate to the Extensions tab.
  4. Locate the Shop Extra extension and click to expand it.
  5. 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.

Filters Canvas area in action.

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.

Video Resources

Not the solution you are looking for?

Please check other articles or open a support ticket.