Filters on mobile and no filters on desktop

Hi, I would like to achieve an effect where shop filters are enabled on phone but disabled on desktop. So that woo-commerce sorting box is on desktop in the right corner but on phone it’s filters. I tried achieving that with some css but failed.

Desired desktop look: https://prnt.sc/h56oy4

Desired phone look: https://prnt.sc/h56oqa

Hello,

Thank you so much for contacting our support center.

It would be possible only with a custom CSS code to hide one filter on desktop and show it on mobile. If you want, we can prepare it for you. Just send us your shop page link.

Kind Regards
XTemos Studio

Hi,

That would be perfect, thank you 🙂

I did some poedit translations so the theme interface is not 100% english, hope you won’t mind.

Best,
Jakub

Sorry, but we can’t open your website and it shows an error in the browser. Could you please check it?

Yes, my bad.

Add this code snippet to the Custom CSS field for desktop

.shop-loop-head .basel-filter-buttons {
	display: none!important;
}

And this one for mobile devices only

.sidebar-left {
	display:none;
}

Hi,

I’ve added a code snippet and everything works fine apart from one thing.

How it is now: https://prnt.sc/h5c0k0

What I need in desktop view: https://prnt.sc/h5c0up

Best,
Jakub

Try to add this code to the functions.php file in the child theme

remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

Hi,

I have added this but nothing changed, I still can’t see sorting drop down on desktop.

Best,
Jakub

Sorry, try this one instead

add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

Hi,

I have added it but unfortunately still nothing changes.

Best,
Jakub

In this case, we need your FTP access to check why it doesn’t work.

Hi,

Sure, here you go:

Best,
Jakub

We can’t see your website now. Please, provide us an access.

Hi,

Under construction mode has been temporarily disabled.

Best,
Jakub

Hi,

Check how it works now.

[Author]

Posts