How to fix the uneven Woocommerce Shop Page Layout with Divi Theme?

Welcome to my blog. In this post I’m gonna show you how to fix the Woocommerce Shop Page layout problem. I might’ve happened to you or might’ve not, but it did to me and it took a while to find the solution. So, since I was able to fix it, I wanted to share the solution. Now, If your shop looks something like the image below, where you only have two products on the first row, one on the second row, and it just repeats all over your shop page.

There are two methods we can use to fix this issue

The first method will be to go to the THEME CUSTOMIZER, GENERAL SETTINGS, LAYOUT SETTINGS, WEBSITE GUTTER WIDTH, and change the Gutter width. You can try the 4 different widths until the issue is fixed. In my case 1 and 2 were the ones that helped me fixed the layout issue. Follow the steps below for the step by step tutorial.

FIRST STEP

SECOND STEP

THIRD STEP

FOURTH STEP

Now once you changed the WEBSITE GUTTER WIDTH, the products images in your Woocommerce Shop Page will be evenly displayed in the rows, but they might not look big enough (SEE IMAGE BELOW). Now in the case that this option doesn’t work try the second method.

The Second Method will consist on adding some CSS to the site, you will add this code to the DIVI OPTION page, make sure you are in the GENERAL settings tab and scroll all the way down to the CUSTOM CSS BOX where you are gonna add your CSS code. Follow the steps below to make it easier.

FIRST STEP

SECOND STEP

Scroll all the way down for the CUSTOM CSS box

THIRD STEP

Add the following CSS code into the box:

CLICK HERE FOR CSS CODE

If you need to adjust the the layout more just change the following values.

This should be the end result.

As you can see the only difference between both methods is that the second one will allow you to display bigger products images. Now it is important to highlight that for the second method you will have to set the WEBSITE GUTTER WIDTH to 3, otherwise the images will display as if you were using the First method.

I would love to hear if this blog was helpful at all, so feel free to leave any comments below. Thanks for visiting.