Show filter button at top and hide sidebar filters (mobile/desktop)

Hello,

I’m using the Woodmart theme for my WooCommerce store and I would like to customize the product filters behavior.

Currently, the filters are displayed as a sidebar. What I need is:

Show a filter button at the top of the product listing (like a toolbar button).
When clicking the button, display the filters (preferably as an off-canvas panel or dropdown).
Keep the filters hidden by default to improve UX, especially on mobile.
Ideally, this behavior should work on both desktop and mobile views.

I’ve seen similar behavior in some modern eCommerce layouts, but I couldn’t find a native option in Woodmart settings.

Could you please guide me on:

Whether this is possible using built-in theme options?
Or if it requires custom code (hooks, JS, or CSS)?
If there is a recommended way to implement this without breaking updates?

Thanks in advance!

Attachments:

You must be logged in to view attached files.

Hello,

The functionality you described is available in our theme and is called the Off-canvas sidebar. Generally, almost all sidebars in our theme can be converted into an off-canvas sidebar, and the setup instructions depend on your specific theme configuration.
Since you are using the Product Archive Builder with WPBakery, you need to edit your layout in the WPB editor. There, you should assign the appropriate roles in the column settings to the left part (with widgets) and the right part (with products): one as the off-canvas area that slides out, and the other as the content area that expands to full width when the sidebar is hidden.

To open this sidebar, you will need a separate Off-canvas sidebar button element, which you can place wherever you prefer.
You can find more information about the off-canvas sidebar, including screenshots, in our documentation: https://xtemos.com/docs-topic/custom-off-canvas-sidebar/. Additionally, you can import one of the pre-defined layouts (One of them is marked on the screenshot https://monosnap.ai/file/zfAOVOGPiCol8vwaIbauqqpimAzqio) that already have these options configured to study how they work or use them as a base.

Kind Regards

[Author]

Posts