Sidebar move to top button on mobile

Hi there,

The YITH product category filter is great on a desktop and display in the left hand sidebar. However on a mobile it gets pushed down to the bottom of the category page. I’m wondering if there is a way to move it to the top of the product page- and have it as a single button ‘filters’ which someone can then click on to open the tab?
I’m currently using a woocommerce sidebar.

The site is equihire.co.uk

Thanks,
Abi

Hello Abi,

I don’t think that there is an easy way to achieve what you described, but you can try to move up mobile WooCommerce sidebar with jQuery.

  1. Please install and activate Insert Headers and Footers plugin that will allow you to insert JavaScript (jQuery) code.

  2. Go to your Dashboard → Settings → Insert Headers and Footers → add the following code to Scripts in Header section, and click Save button.

<script>
    jQuery(document).ready(function(){
        jQuery('.woocommerce #secondary').after(jQuery('.woocommerce #primary'));
    });
</script>

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

That’s worked however as I have so many categories it won’t be feasible. Is there anything you know that could create a drop down filter effect?

Thanks,
Abi

Hi roman,

I’ve managed to configure the commerce sidebar I’m using and have created the desired Dropdown effect. The only concern now is that the spaces between the widgets on the sidebar are quite large on mobile (this is still st the bottom of the categories pages for the time being). Also there doesn’t seem to be any margin on mobile and the text almost comes off the page.

Thanks,
Abi

Hello Abi,

I’m not sure what exactly is your current issue.

Can you please describe what you want to achieve?

Kind Regards, Roman.

Sorry roman I’ve managed to fix it. Thanks for the help, Abi

Okay, you are welcome Abi!

Kind Regards, Roman.