Change Divi and Woocommerce to left sidebar like Amazon

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

This is a simple Divi tweak that only uses CSS. It will change all instances of the sidebar to float left and arranges Woocommerce and other content on the right and with a responsive layout. It's great for creating a layout similar to Amazon where product categories and filters are always on the left side of the page.

You may be thinking, "Can't I just put the sidebar in a section with a 1/4 column on the left and a 3/4 column on the right using the page builder?". You could. And on the desktop it would look fine. The problem is on responsive displays. Because the 1/4 column comes first, you sidebar will display before your content on mobile devices. Not exactly what most people would prefer.

Before I share the steps you'll need to take, here are a few before and after screenshots.

And this is how everything will look after the tweak:

And below is everything you need to get this working on your site:

CSS

Locate your style.css file or edit within your child theme style.css

Add the following code:


/* Sidebar Left Side of Page */

.container:before {
display: none;
}

#sidebar {
float: left;
}

.et_pb_widget {
margin: 20px 0 !important;
padding: 0 !important;
border: 1px solid #A4D345;
}

#search-2.et_pb_widget {
border: none;
}

.screen-reader-text {
display: none;
}

input {
border: none;
border-radius: 3px;
}

.woocommerce .widget_price_filter .price_slider_amount .button, .woocommerce-page .widget_price_filter .price_slider_amount .button {
margin: 0 0 10px 10px;
}

.price_slider_amount .price_label {
padding-right: 10px;
font-size: 14px;
}

.widget_shopping_cart .buttons {
text-align: center;
margin-bottom: 15px;
}

#searchform {
padding: 5px 5px 5px 10px;
}

.et_pb_widget {
box-shadow: 5px 5px 10px #BBB;
}

.et_pb_widget h4 {
background-color: #2EA3F2;
padding-top: 5px;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #fff;
}

.et_pb_widget ul {
padding: 5px 10px 0 !important;
}

.et_pb_widget:first-of-type {
margin-top: 0 !important;
}

.widget_search #searchsubmit {
right: 0;
}

#main-content .container:before {
right: 0px;
left: 224px;
}

.category #sidebar .et_pb_widget {
margin: 0 30px 30px 0px;
}

/* WooCommerce */

.et_shop_image {
box-shadow: 5px 5px 10px #BBB;
}

.woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count {
display: none;
}

.woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb {
display: none;
}

@media only screen and ( min-width: 1101px ) {

.widget_search #searchsubmit {
right: 17px;
}

}

@media only screen and ( min-width: 1081px ) and ( max-width: 1080px ) {

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
margin-right: 50px !important;
}

}

@media only screen and ( min-width: 1081px ) {

.container, .et_pb_row {
width: calc(100% - 100px);
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .archive.et_left_sidebar.woocommerce ul.products li.product {
width: 30.75% !important;
margin: 0 3.8% 2.992em 0 !important;
}

.archive.et_left_sidebar.woocommerce ul.products li.product.last {
margin: 0 3.8% 2.992em 0 !important;
}

.archive.et_left_sidebar.woocommerce ul.products li.product:nth-child(3n+3) {
margin-right: 0 !important;
}

}

@media only screen and ( min-width: 981px ) and ( max-width: 1080px ) {

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
margin-right: 50px !important;
}

}

/*-------------------[768px]------------------*/

@media only screen and ( min-width: 981px ) {

.et_pb_section:first-of-type {
padding-top: 28px;
}

#sidebar {
width: 225px !important;
margin-top: 76px;
}

.et_pb_widget_area_left {
border-right: none;
margin-top: 66px;
}

.woocommerce .widget_price_filter .price_slider_amount .button, .woocommerce-page .widget_price_filter .price_slider_amount .button {
padding: 5px !important;
}

#left-area, .et_pb_column_3_4 {
margin-left: 40px;
width: calc(100% - 275px) !important;
float: right !important;
margin-right: 0px !important;
margin-left: 0px !important;
}

.et_pb_column_1_4 {
float: left;
}

}


@media only screen and ( max-width: 980px ) {

#left-area {
width: auto !important;
}

.et_right_sidebar #left-area {
float: none !important;
}

.widget_search #searchsubmit {
position: relative;
}

}

There are a few more things you'll want to change and keep in mind. You'll want to go to the Epanel General Settings and change the Number of Posts displayed on Archive pages to 6 or any number that can be divided by 3 and result in a whole number. You'll also want to do the same in the Shop Module from within the Divi Page Builder if you decide to create your own shop pages with the sidebar. Then you will need to change the default Columns Number to 3. And finally, when adding the Sidebar module on a Divi created page, make sure the content or shop module is on the left and inside a 3/4 column and the sidebar is on the right and in a 1/4 column. Also make sure left is selected under Orientation in the sidebar settings.

This is how it should look:

That's it. Hope you enjoy this tweak and please let me know how it turns out!

    14 Comments

  1. I have used your code and I am having issues. (Awesome BTW…Thanks!)

    Been trying to figure this out for 2 hours now.

    When I use the sidebar in a specialty section with the sidebar as 1/4 and a full 3/4 next to it, everything drops down below the sidebar.

    You will see on the homepage what I am talking about.

    If you click on “order / pricing” in the top nav, you will see that this page loads fine for the most part. I am using 1/4 1/4 1/4 1/4

    If you click on one of the print products, this brings you to a woocommerce product page. The sidebar is much thinner here. That is now I like it. (Wish I could pull it towards the top more though on all of the pages.

    My main issue is the homepage and using specialty sections. Do you know how I can fix this?

    Steve FIschgrund

    December 8, 2015

    • Hi Steve. This tutorial was created on one of the early versions of Divi. A lot has changed since then but if it’s working for the most part, I’ll try to focus on the problems instead of completely rewriting it:

      To get the sidebar to the top of the page, remove the margin-top from both of these:
      @media only screen and ( min-width: 981px ) {
      #sidebar {
      width: 225px !important;
      margin-top: 76px;
      }

      .et_pb_widget_area_left {
      border-right: none;
      margin-top: 66px;
      }
      }

      To prevent the homepage content from dropping down, in the same section add this:
      marg-right: 0 !important;

      to the following style:
      .et_pb_column_1_4 {
      float: left;
      }

      You might also want to add this:
      @media (min-width: 981px)
      .et_pb_gutters4.et_left_sidebar #left-area {
      padding-left: 0;
      }

      Brad (admin)

      December 9, 2015

    • Again, this tweak should be rewritten to account for all of the changes in Divi since it was originally posted. Until I can get around to it, hopefully this will hold you over or at least point you in the right direction. Let me know if you have any issues.

      Brad (admin)

      December 9, 2015

  2. This is a great tweak. I played with it and also has issues, but see in the comments a few fixes I will try. For me, I didn’t really want the blue styling and 3D effect. i just wanted my sidebar to go on the left without changing the styles.

    That said, if I can tweak the colors and add a touch of spacing so text doesn’t go up against the borders, i may give this look a try.

    I’ll pop back in again since you are updating the code. Thanks so much again!

    Kristen

    Kristen

    January 6, 2016

  3. Thanks a lot!
    On Divi 2.7.8..it works properly!
    I have lost several days looking for any solution to my problem: the shop page esthetics was poor.
    Now it looks awesome!!
    Great code!

    Thanks again

    Maria Martinez

    August 10, 2016

  4. Uppps!
    It changed the style of my footer, changing the footer widgets into the sidebar style.
    How could I remove the new style of footer?

    Thank you.

    Maria Martinez

    August 10, 2016

  5. On the shop page it looks very nice but I am having some problems, the code also changed my homepage and now I can’t set the columns number in the shop module.

    Patrick

    September 10, 2016

    • I have the same issue. I am unable to set the number of columns in my shop modules properly 🙁

      Janusz

      October 27, 2016

  6. It is a shame Divi shop module is not WooCommerce ready. No Add to cart button, no pagination.

    itmaco

    September 23, 2016

  7. Hai guys i have a issue

    can divi siderbar module show woo pricelist?

    Afrianto

    October 6, 2016

  8. Hi, can i use this code for separate categories and sub categories(woocommerce) ??
    in homepage i have a woo sidebar with all products categories but it’s not nice like this .
    link: beeprinting.it

    thanks

    soheil

    January 17, 2017

    • Hi Soheil. This is an older tutorial. It might be easier to use the Divi Page Builder for your category pages. Using this new tutorial, you can create a layout for each of your category pages and load them into your category pages using the new tutorial. If you have a lot of categories, this might be impractical. In that case, you’ll just need to adjust the tutorial on this page and add the classes for your category pages.

      Brad (admin)

      March 20, 2017

  9. This has been a great help for me, I love the way it looks! It works great on desktop, but is there any way to move the sidebar to the very top of the shop page on mobile? On mobile it moves the sidebar down to the bottom of the page, below all of the products. Thanks in advance for any help!

    Angie

    April 4, 2017

  10. Hi!

    My problem seems to be a little different..

    There’s a standard way of changing the layout of a single product page in Divi: you just select either a full-width layout or one of the sidebar layouts. The problem is you can only do it for a single product page at a time. Is there a way to switch product page layout for multiple (or all) products at the same time, for instance, changing the layouts to right sidebar? I can’t possibly do it for each individual product page. It’s a nightmare!

    If you have any ideas, please help.

    Thank you.

    Misha

    May 15, 2017

Post a Reply

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