Top bar product filter

[micheal_w]

Hi guys,

is it possible to have the top bar product filter on shop page be open by default?

Thanks!

[micheal_w]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.sf-mobile-shop-filters{
display:block !important;
}

Thanks
Mohammad

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

To hide the bar for mobile, you can use:

@media (min-width: 768px) {
.woo-aux-options { display: none; }
}

The changing layout seems to be caused by the plugin. I cannot replicate initially on my dev. Please test this:

.woocommerce-ordering select {
    max-width: 125px;
}

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

For mobile, not tablet right? Try this:

@media only screen and (max-width: 767px) {
.woo-aux-options { display: none; }
}

[micheal_w]

Hi David,

I have widgets in the Woocommerce filter bar.
By using your latest code, it hides the filter bar header itself but the content is still there…
Can it be hidden on mobiles?

Please note:
I am using another css from Mohammad, because I want the filters open by default

.sf-mobile-shop-filters {
  display: block!important;
}

(just wanted to let you know, it maybe interfere with your css)

My original request was in summary:
1. I would like the top filters open by default on desktop and tablet and closed on mobiles.
…if that doesn’t work…
2. I would like the top filters open by default on desktop and tablet and hidden on mobiles.

Thanks for the help!

[David Martin – Support]

This CSS will result in this output:

@media only screen and (max-width: 767px) {
  .woo-aux-options,
  .sf-mobile-shop-filters { 
    display: none!important; 
  }
}

[micheal_w]

Hi David,

I’m not sure but it doesn’t work for me 🙁
See attached my setups and screenshots after cleared cache…

What am I doing incorrectly?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

It because you are overriding this in your CSS using:

.sf-mobile-shop-filters {
    display: block!important;
}

Test changing it to:

.sf-mobile-shop-filters {
    display: block;
}

[micheal_w]

You’re champion! Thank you 🙂

[Mohammad – SUPPORT]

Hi,
Great thanks to David.
Mohammad