[Support request] Responsive sidebar for woocommerce

[roadlink]

Hi there,

I have too many filters (attribute) in sidebar. It works great on desktop.
But when visit website via mobile these filters go bottom of the page.

I can have same filters on off canvas menu but it will mean that double content and extra load to page.

What I want to have is have 2 buttons on top of the products.
1. Filter
2. Sort

When user click filter, sidebar will be opened kind of pop up.

I will put 2 links, They do exactly what I want. believe me this is one of the most important feature for woocommerce themes.

Do you have any suggestion to do this?

PS : This plugin does the similar job with adding an image right-bottom of the page. https://wordpress.org/plugins/responsive-sidebar/

[Leo]

Hi there,

The two plugins suggested by another user in a topic that you found would likely still be the best option for now:
https://generatepress.com/forums/topic/how-to-make-collapsible-sidebar-on-mobile/#post-1666410

We’ve received your feature request in Github and will definitely consider it when we do another WooCommerce update again.

[roadlink]

Hi Leo,
Yes, this one does the job but dead since 2 years.
Probably will not get any update in future.
So I find risky to use it.

Other one is not OK.

[David]

Hi there,

there is a method i used here, that a) moves the left sidebar to the top of the page on mobile and b) adds a CSS toggle to open and close it:

https://generatepress.com/forums/topic/left-sidebar-on-top-and-as-button-on-mobile/#post-2417916

[roadlink]

Hi David,
It is almost 90% hit. Thanks 🙂

What I would ask;
1. Is it possible to show sidebar on 80% of screen.
2. Is it possible to add X on top to close sidebar. Lile off canvas menu.
3. Close sidebar when click the rest 20% of screen. https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element

[David]

2. You could include the icon in the label HTML.

1. and 3. not really, as it would require a modal/canvas element to achieve those affects.

This is just a simple pure CSS method 🙂

[roadlink]

Hi David,

Clear now, thanks for details.

I can include icon in here.

<input type="checkbox" id="side-toggle">
<label for="side-toggle"><span>Show Sidebar</span><span>Hide Sidebar</span></label>

but how about add icon at the corner of sidebar? Do you know any method?

[David]

Will there be any label text ? Or just an icon

[roadlink]

Just icon example OK for me.
I believe I can handle the rest (hopefully 🙂 )

[David]

Just add the icons in the spans in place of the text.:

<label for="side-toggle">
	<span>svg icon open</span>
	<span>svg icon close</span>
</label>

And in the CSS you can change / remove the text-align: center; That will positon it to either side of the top if the sidebar.

[Author]

Posts