No results found. Try again with different words?

Search must be at least 3 characters.

How to Display WooCommerce Sidebar on Top for Mobile Devices?

When you enable WooCommerce sidebar on a shop, cart, checkout page and/or single product page, the sidebar is displayed in a secondary container.

What is a secondary container?

Basically, a container is where the main content and information appears. In general, omit the header and footer part of the website and what remains is the container. The content area and the sidebar are parts of the container. The content area is technically called as the primary container, whereas the sidebar is the secondary container.

On mobile devices, the primary container stacks on a secondary container. So, the secondary container is displayed below the primary container.

If you wish to display the sidebar above the primary container on mobile, you would need to use custom CSS code. Necessary CSS code is mentioned below for both sidebars.

For Left Sidebar-

@media (max-width: 768px){
  .ast-left-sidebar #content>.ast-container{
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
      -moz-box-orient: horizontal;
      -moz-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
  }
}

For Right Sidebar-

@media (max-width: 768px){
    .ast-right-sidebar #content>.ast-container{
        -js-display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .ast-right-sidebar #content>.ast-container>#primary {
        order: 2;
    }
    .ast-right-sidebar #content>.ast-container>#secondary {
        order: 1;
    }
}

Where can I put this custom CSS code?

You can insert this CSS in two ways-

  1. In Customizer: From WordPress backend navigate to Appearance > Customize > Additional CSS  and add code the custom CSS area. (Recommended) OR
  2. Through child theme’s style.css: Edit the child theme’s style.css and add a required CSS.

Other useful links-

  1. How to Install Astra Child Theme?
  2. How to edit style.css in a child theme? 
Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form