Layout order on tablet and mobile for Woocommerce product page

[Sharpy01]

Hi there,

I have looked through the forum and haven’t found the solution I am looking for. Maybe it is there, maybe it isn’t. Anyhow. What I want is for the sidebar to load on the product page so that the filter appears above the main content on both tablet and mobile views.

I am a long time user of pro and have an unlimited lifetime license. The support team helped me with another issue recently, so I reposted the themeco credentials below.

Thanks,

Grant

[tristup]

Hi @Sharpy01,

Thanks for reaching out.
It seems that you want the sidebar to load before the main content, you can achieve that by adding the following code into the Theme Options > CSS, I would suggest you add the hierarchy class to avoid any conflict in other pages. Here is the sample code I have added body.post-type-archive-product to specify the page you mentioned.
To apply the same code to other pages, just add the body.page-id- with it.

@media (max-width: 767px)
{
    body.post-type-archive-product .x-container
    {
        display: flex;
        flex-direction: column-reverse;
    }
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[Sharpy01]

@tristup

@media (max-width: 767px)
{
    body.post-type-archive-product .x-container
    {
        display: flex;
        flex-direction: column-reverse;
    }
}

sweet…thanks

[ruenel]

You’re welcome @Sharpy01!