🎁 Get Up To 70% Off During Divi Summer Sale! Get Divi

How to Change Number of Columns in Shop Module on Small Screens in Divi

Blog, Divi Tutorial | 0 comments

In this article you will find the steps to change the number of columns in the shop module on small screens in the Divi theme.

The shop module in the Divi theme will show 2 columns by default on mobile phones. There is no option to change the number to 1 column inside Shop module settings.

However we can change the number of columns with a snippet of CSS Code. After following the steps below the shop module will show one column on phones.

1. Add CSS Class for Changing Columns in Shop Module

The first step to change number of columns is to add a CSS Class to the Shop module. We add the CSS Class so that our code only affects this shop module and does not affect any other elements on the website.

Open the Shop Module Settings > Advanced > CSS ID & Classes > CSS Class and then add the class lwp-one-column-shop to it.

If you are not sure where to add the CSS Class then please check the screenshot below.

Shop module one column on small screens css class

2. Add CSS Code for Changing Columns in Theme Options

Next you have to add CSS Code in the Theme Options to change number of columns for any shop module that has the custom CSS Class.

Go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and then add the following CSS code.

@media (max-width: 767px) {
    .lwp-one-column-shop .woocommerce ul.products li.product {
        width: 100%!important;
    }
}

Please check the screenshot below to understand where to add the CSS Code in Theme Options.

Divi Theme Options Custom CSS

Once you have added the CSS Code and CSS Class the Shop Module will show one columns on small screens.

Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

Here are some more Divi tutorials that you can check next.

You can find a complete list of all the help articles related to Divi on the Divi Tutorials page.

About the Author

The author of learnhowwp.com is a WordPress expert with over a decade of experience, specializing in Divi. Since 2014, they have built numerous WordPress sites and developed 8 Divi plugins with over 30,000 active installations. A former support team member at Elegant Themes, they launched learnhowwp.com in 2020 to share their in-depth knowledge of Divi. Now home to over 65+ articles dedicated to Divi tutorials and insights

0 Comments

Submit a Comment

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

Our Plugins Are Already Being Used On 30,000+ Amazing Websites.

We offer a 30 Day Money Back Guarantee on all plugins, so joining is Risk-Free!