Woocommerce sidebar mobile layout


I’ve created a shop page on my website using Woocommerce plugin, but I have some problems:

The sidebar used for filtering the products looks OK on desktop, but on mobile it is moved on the bottom of the page. How can I put the filter above the products in mobile layout?

Also, I want to insert a full-width row above the products, that goes over the sidebar, but I can’t figure it out.

Thank you


How I see you’ve already moved the sidebar to the left / on top on mobile devices, do you need more help with this, or it’s how you would like to have the filter on mobiles?

Kind Regards,


I used the following CSS code to move the sidebar:

@media only screen and (min-width: 992px) {
#primary {
float: right;
#secondary {
float: left;
@media (max-width: 1000px) {
.row {
display: flex;
flex-direction: column-reverse;

I still have some questions:

  • How can I compress the sidebar into a button only when I see the page on mobile layout?
  • How can I put a centered button in the header area of the Shop page? (just like the one from the Home page)
  • Is it possible to add a row with widgets after the products area? (Now, if I add a row it will always show before the products area)

Thank you,