Left sidebar on top in mobile (woocommerce)

Hi there,

Thanks for writing.

You will need to use a little custom CSS to achieve this. Here’s the code:

WooCommerce archive pages:

@media(max-width:767px){
    .woocommerce.archive .site-container {
        display: flex;
        flex-direction: column-reverse;
    }
    .woocommerce.archive .primary-sidebar{
        width:100%;
    }
}

WooCommerce single product pages:

@media(max-width:767px){
    .single-product .site-container {
        display: flex;
        flex-direction: column-reverse;
    }
    .single-product .primary-sidebar{
        width:100%;
    }
}

I tested it on my test site and it worked. Here’s a screen recording: https://share.getcloudapp.com/jkuOl2Qo

Let me know if this works for you.

Kind regards,
Chito

I don’t understand where to insert the CSS.
Where is the archive and product pages for woocommerce ?

Hi there,

I apologize for the confusion, but the link to the guide is already included in my response above. You can add the custom CSS in Appearance > Customize > Additional CSS. Here’s the guide I’m referring to: https://www.kadencewp.com/kadence-theme/knowledge-base/general/how-do-i-add-custom-css/

I hope this helps, and let me know if you need further assistance.

Kind regards,
Chito