Woocommerce Sidebar to top on mobile

Hey @barrystv,
Unfortunately, there isn’t a built-in function for this. You can use CSS to remove the sidebar from mobile view. Then you can add your sidebar content to your content area and use CSS and media queries to only show that on mobile. Would that work for you? Let me know and I can help with the CSS.

Best,
Hannah

Hey,
You can use custom css like this:

@media screen and (max-width: 1024px){
    .archive.has-sidebar .content-container {
        display: flex;
        flex-direction: column-reverse;
    }
}

Ben

Hey Hannah and Ben,

Actually, Ben’s solution was what I was looking for. One little thing I notice now is that the width of the sidebar on mobile (now on top as I wanted) takes the width of the first heading text of the sidebar content and not the full mobile container width (hope you get what I mean to say, don’t know if I express myself correctly). I solved it by adding a picture to the sidebar first, so it is not a big deal.

I am quite a noob to WordPress, Kadence theme and css; it is actually my very first website in years (last website I made was with XoopsCMS somewhere around 2003).

The possibilities that Hannah suggests also sound interesting, then I would be able to tailor the look and feel of the sidebar more responsive. Can you point me to good documentation about it?

Anyway, many thanks for the great theme and great support.

Hey @barrystv,
We don’t have documentation on the solution I suggested as it’s only a workaround and not a built-in function. I think Ben’s solution is the simplest for you. Though if you wanted to go the other route it would just require a bit of CSS. So you would add content to the content area of your page and also enable a sidebar on the page. Then you would use CSS and media queries to show the content on mobile and hide it on desktop, and visa versa for the sidebar.
Hope that’s helpful!

Kindly,
Hannah