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!