How to set Woocommerce sidebar to the left in divi

Posted by George Nicolaou

On 19 Feb, 2018
George Nicolaou - Senior Web Developer

How to set Woocommerce sidebar to the left in divi

by | Feb 19, 2018 | Divi Theme Code Snippets | 10 comments

When I wanted to make the Woocommerce Sidebar show up on the left instead of on the right I set the relevant option within the Theme Options assuming that would do the trick. I need to add some css thought as shown below

 

/*woocommerce sidebar left*/
.et_right_sidebar #main-content .container::before{
left: 20% !important;
right: auto !important;
}
body #page-container #left-area{
float: right;
padding-left: 3%;
padding-right: 0;
}
body #page-container #sidebar{
padding-left: 0;
padding-right: 3%;
float: left;
}
/*woocommerce sidebar left*/

Let’s connect

Get in Touch with me easily using the methods below

©Copyright  George Nicoalou 2023 |  Disclaimer  |  Site Map

10 Comments

    • George Nicolaou

      Divi–>Theme Options–> Custom CSS box right at the buttom

      Reply
  1. Luke

    This code works great, but how would i make this effective on a mobile as it’s still showing on the right / below the shop.

    Reply
    • George Nicolaou

      Hey Luke,

      If you show me a page or even better give me back-end access I should be able to help. E-mail me so we can figure it out

      Reply
  2. Alexios Pagkozidis

    Thank you! Great snippet!

    Reply
    • George Nicolaou

      No problem Alexis and since you are Greek and I am Cypriot I will continue my reply in Greek. Ο,τι χρειαστείς εδω είμαι

      Reply
  3. Aitor

    Thank you, it worked.

    Reply
    • George Nicolaou

      Great to hear that

      Reply
  4. Dude

    PERFECT! I look all over and this one works with DIVI.

    Thanks you

    Reply
    • George Nicolaou

      great to hear that

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This
Divi Theme Code SnippetsHow to set Woocommerce sidebar to the left in divi