How to Display WooCommerce Sidebar on Top for Mobile Devices?

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

    Scroll to Top

    Download is Just A Click Away!

    Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

    Download is Just A Click Away!

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