I need filters on top of my shop page for mobile devices, for this purpose I have filter widgets in the left sidebar (for desktop/tablet view) and some in the header widget area (only for mobile). I hide them accordingly with a plugin.
The use of the header leaves additional space above my products on the shop page when viewing on desktop/tablet.
My thought: remove the header for devices with a screen above the size of a mobile phone.
I’m not using any headers or header widgets on different pages, so I’m fine with removing the header for tablet/desktop on all pages, but it would be even better if I can hide it only on WooCommerce related pages (I might use it in the future).
So the real question:
What is the best way to show the filters above the products on my shop page? If placing it in the header is the right and only answer.
How can I hide the header on the shop page and other WC related pages (such as product category) on devices bigger than a mobile phone?