Return to previous page

Hide sidebar with product filters on mobile

This topic has 3 replies, 3 voices, and was last updated 7 years, 6 months ago ago by Max Mullins

Mxmarcu

Participant

May 18, 2017 at 20:51

Hello,

On product listings page is it possible to keep the sidebar with attribute filters hidden on only mobile devices and instead show the button “filters”.

And on desktop the sidebar with attribute filters should always be visible and positioned to the left. (this is how it works for me now).

Having the filters to always show on mobile makes the product listings very cluttered, it would be a better user experience to press a button to show the filters and vice versa on desktop.

Thanks!

Please, contact administrator
for this information.

#163515 Copied Theme version: latest WooCommerce version: latest

2 Answers

Rose Tyler

Support staff

May 19, 2017 at 10:25

Hello,

I’ve added some code in Theme Options > Custom css. Please check now.

Regards,
Rose Tyler.

#163562 Copied
Max Mullins

Participant

May 19, 2017 at 10:32
Hello @Mxmarcu,

We will consider your point of veiw for our next theme updates.
For now it can be solved via custom.css and theme settings.
1)You may add all necessary filters you already have displayed on shop page in appearance->widgets->shop sidebar and enable hidden sidebar switcher in dasboard->theme options->product page layout.
2)Select shop page layout with right sidebar enabled. like on screenshot http://prntscr.com/f9lxq4.
Also please add following code into the custom.css in theme_options->custom.css to hide text on tablets and mobile phones:
```
@media only screen and (min-width: 767px) {
   .archive  .filter-content{display:none!important}
}}
```
Regards,
Max Mullins
#163563 Copied
Tagged: filters, hide, mobile, persuasive, product, sidebar, themes, woocommerce, wordpress
Viewing 3 results - 1 through 3 (of 3 total)