By default, Divi’s mobile layout of the Shop page or Shop module is just 1 column stacked on top of each other. This layout is not as preferable, especially when you have a lot of products in your store. So, today, we will be focusing on how to make the Shop page or Shop module mobile layout to 2 columns, which is the most asked for layout as having more than 2 could look a bit too cluttered when viewed at a mobile device.

I will be making this tutorial into two parts:

1) Basing the change on the default Shop page (the standard shop page as assigned by WooCommerce)

2) Basing the change on an individual Shop module that you can place anywhere on your site

For a more detailed explanation, I suggest watching the Video Tutorial as I go in-depth on the CSS code that needs to be added. But if you’re looking for a quick fix, then feel free to scroll down and read the text tutorial; not a problem at all!

Let’s get to it!

Sample (Default Shop Page)

Before

After

Sample (Individual Shop Module)

Before

After

Video Tutorial:

Tutorial (Default Shop Page)

Step 1: Head over to Theme Customizer to add CSS

Let’s go to the Theme Customizer to add the simple CSS via WordPress dashboard > Divi > Theme Customizer > Additional CSS

Step 2: Add CSS Code & Publish

Now, we can add this code:

— — —

@media only screen and ( max-width: 980px ) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 47.5% !important;
margin-right: 2.5% !important;
}
.woocommerce-page ul.products li.product:nth-child(2n) {
margin-right: 0 !important;
}
}

— — —

A little CSS lesson:

1) the text bolded in red is what we call a media query. This is one of the most basic media queries, and it targets mobile phone devices, and that’s what we are targeting in this example.

2) in this instance, the text bolded in blue is the Class we are targeting and the “nth-child(n)” is the first column of the list of products that we have.

3) the text bolded in orange is the width of the first column. We cannot exceed 50% (as, of course, the full width of the 2 columns in total is 100%) as if we do, there will only be one column that is placed on the left side of the screen.

4) the text bolded in magenta is the right margin of the 1st column. We need this as if we do not have it, the shop items will be stuck together.

5) the text bolded in black is the Class we are targeting and the “nth-child(2n)” is the second column of the list of products we have.

6) the text bolded in gold is the right margin that we need to specify as 0 to show that there is no need to add a margin to the second column as there is already a margin added to the first column.

And then, make sure to click the Publish button!

There it is! Now you have a 2 column shop page mobile layout! Let’s get to the second part of the tutorial!

Tutorial (Individual Shop Module)

Step 1: Add CSS Class to Shop Module

Let’s assume that you already have put a Shop module into one of your pages. What you have to do now is to add a CSS Class to the Shop module NOT to the Row where the Shop module is. For this example, let’s add sample-shop as the CSS Class.

Step 1: Head over to Theme Customizer to add CSS

Now, we will target that CSS Class. Let’s go to the Theme Customizer to add the simple CSS via WordPress dashboard > Divi > Theme Customizer > Additional CSS

Step 2: Add CSS Code & Publish

Now, we can add this code:

— — —

@media only screen and ( max-width: 980px ) {
.sample-shop ul.products li.product:nth-child(n) {
width: 47.5% !important;
margin-right: 2.5% !important;
}
.sample-shop ul.products li.product:nth-child(2n) {
margin-right: 0 !important;
}
}

— — —

If you’ve read the tutorial for the Shop Page, you’ll notice the difference from .woocommerce-page to .sample-shop, and that’s because we are targeting the CSS Class of the Shop Module now.

A little CSS lesson (in case you haven’t read the one from the Shop Page tutorial above):

1) the text bolded in red is what we call a media query. This is one of the most basic media queries, and it targets mobile phone devices, and that’s what we are targeting in this example.

2) in this instance, the text bolded in blue is the Class we are targeting and the “nth-child(n)” is the first column of the list of products that we have.

3) the text bolded in orange is the width of the first column. We cannot exceed 50% (as, of course, the full width of the 2 columns in total is 100%) as if we do, there will only be one column that is placed on the left side of the screen.

4) the text bolded in magenta is the right margin of the 1st column. We need this as if we do not have it, the shop items will be stuck together.

5) the text bolded in black is the Class we are targeting and the “nth-child(2n)” is the second column of the list of products we have.

6) the text bolded in gold is the right margin that we need to specify as 0 to show that there is no need to add a margin to the second column as there is already a margin added to the first column.

And then, make sure to click the Publish button!

There it is! Now you have a 2 column shop module mobile layout!
What do you think? Are they complicated or a bit simple? If you have any questions about them, feel free to leave a comment, and I will do my best to help!

If you watched the YouTube video tutorial, please do Like, Comment and Subscribe! I definitely appreciate the support. Thank you!