CSS help to display the sidebar on woocommerce page

Hi

On my woocommerce shop page the sidebar, when clicked on, appears at the bottom (and is unreadable) of the product categories rather than cover / push the product columns over.
Thanks for any help you could provide

http://www.lacarteriedecloclo.fr/shop

Thanks
James

Hi,

The content area on product archive pages is full-width, that’s why the sidebar doesn’t show correctly there, but you can show the sidebar on right by modifying the content to a max-width and float it to left and the sidebar to right, with this Custom CSS:

.post-type-archive-product.woocommerce ul.products {
    float: left !important;
    max-width: 940px !important;
}

.post-type-archive-product.woocommerce .slide-sidebar {
    float: right !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba
This worked a treat on the main shop page but on the product page this is not coming out OK.
See on: http://www.lacarteriedecloclo.fr/product/3101/
Thanks again
James

Hi,

You can modify the single-product template to fit the sidebar there too, with this Custom CSS:

.single-product #content #main {
    max-width: 750px !important;
    float: left !important;
}

.single-product #content #secondary {
    float: right !important;
}

Please let me know how it works.

Best Regards,
Csaba

Hi
Thank you this works a treat
James

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba