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?
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.
.
