Archived topic
Responsive sidebar for woocommerce
9 replies · Started by roadlink on January 28, 2023
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/
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.
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.
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
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
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 :)
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?
Will there be any label text ? Or just an icon
Just icon example OK for me.
I believe I can handle the rest (hopefully :) )
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.