Filtering products in a collapsable sidebar

Hello, I would like my shop page to look similar to Etsy, where there are only products appearing over whole page with the Sort by function on the right and filters hidden as a sidebar, which I can open by clicking All filters.

Currently I have the shop page as seen on the image, where I have the filters on the left as a Widget. There are problems with it, because anytime I apply a filter, it cancels the other. And I don’t want it to take that much space from the whole page and rather make it as a hidden sidebar which can be opened with a button. Can you guide me on how this can be done?

Attachments:

You must be logged in to view attached files.

[Luke Nielsen]

Hello,

In order to activate the “Custom off-canvas sidebar” using Elementor (https://prnt.sc/uG3jd4IkaF2F) , you need to do the following:

1). Make a section with 2 columns, one of them can contain the sidebar element or filter widgets and another will have your products element. https://take.ms/uti4Y
2). Edit the “Sidebar” column and in its settings set the Column role for “off-canvas layout” as “Off canvas”: https://take.ms/puKlD . Also, specify which devices you want to apply this on: https://take.ms/ZljnG

The column with the products should have the “Content column” value in the “​​Column role” field: https://take.ms/zC3J1

IMPORTANT: both sidebar and content columns should have the same devices selected.

Kind regards

• This reply was modified 1 week, 5 days ago by Luke Nielsen.

Thank you this works… Another question:

If there’s just a few products matching the search and category selected, the filters sidebar appear as blank. I believe it only shows filters that are relevant to the products currently displayed and if the filter wouldn’t take any effect they just don’t appear. I find this weird and would like them to be there every time.

Also I would like more filters there, maybe choose multiple categories to display or even the current searched word. How can I achieve that? Thank you so much.

Attachments:

You must be logged in to view attached files.

Also this is a little bit different topic but still regarding a sidebar. I was using your Mega Electronics template and wanted to setup this sticky navigation for my categories. I deleted your categories and the cool effect of hovering over a category in this sticky navigation which will display the HTML block with other child categories in a nice format with it… I wanted to copy this onto my new categories, but now i can’t since i removed it.

How to setup the HTML block to display the child categories for the parent category hovered in a nice way? I want to have all my main categories in this menu and whenever i hover over them, it will display the nice sidebar as in mega electronics or vegetables template – attached photo.

Attachments:

You must be logged in to view attached files.

Hello,

1. Filters show when products on the page have appropriate attributes that are related to the defined filters in the Appearance -> Widgets -> Shop page Widget area. In general, that functionality comes from WooCommerce so the theme cannot influence it.

In order to define more filters, navigate to Appearance -> Widgets -> and define new widgets to the Shop page widget Area.

2. Here is our documentation about Sticky navigation – https://xtemos.com/docs-topic/sticky-navigation/ , create such a menu as described in our article.

Kind Regards

[Author]

Posts