Display WooCommerce Products in Single Column on Mobile Devices

Last modified Sep 21, 2021
Difficulty Beginner
Language CSS
Category
WooCommerce Products in One Column on Mobile Devices

Once a WooCommerce store is on its way, and a selection of products are added to the back end, the shop page will, by default, display the products listed in two columns. This can be frustrating as the product title and featured image end up looking rather small on mobile devices. 

While there’s no back-end plugin setting for creating a single-column layout for your WooCommerce shop, thankfully, a bit of CSS will do the trick. If you want to change WooCommerce and make a single product page with one column, this tutorial is for you!

Today, you’ll learn how to use a few CSS lines to edit the Divi shop module so that it displays a single column on mobile devices.

Want to skip the step-by-step tutorial and grab the code? Jump straight ahead to the code library and copy the code.

This feature is also available in our plugin, Divi Shop Builder. With the plugin, you can customize our WooCommerce store’s cart, checkout, thank you page and more using the Divi Builder, not code. Check out the Divi Builder plugin.

Showcase Your WooCommerce Products in a Single Column on Mobile Devices

By default, WooCommerce products presented via the Divi Shop module will display in two columns on mobile devices. This can make for a crowded look and feel on mobile. Also graphic details of featured images will be lost as they’ll display at a small size.

In this tutorial, we’ll be working with CSS adding media queries into the Advanced tab of the Divi Shop module. Media queries, sometimes referred to as @medias are lines of CSS that take care of responsiveness for various device sizes and orientations.

Often, websites are designed with desktop or laptop widths and heights in mind. When the same web layout is displayed on a mobile or tablet, the design will likely distort. To remedy this, lines of CSS code called media queries are added to the stylesheet of the child theme. These media queries will target a specific web element and instruct it on how it should display at a particular breakpoint.

Between mobiles and tablets in both portrait and landscape orientation, there are countless combinations of device widths and heights that need to be taken into account.

In this tutorial, you’ll be targeting mobile devices (screen sizes with a maximum width of 767 pixels), and instructing select web elements to display in a certain way.

If you haven’t set up a child theme yet, you can download a free one from the Divi Space site. If you need a refresher on what child themes are and why they’re important, read our guide.

Step 1: Add a Shop Module to a Page Layout

Begin by adding a Divi Shop module to a new page. On desktop, the layout will display as such:

WooCommerce Products in One Column on Mobile Devices - Divi Shop module on desktop

We’ve added a Divi shop module of eight products in four columns to a Shop page

On mobile, the same layout will display as follows:

WooCommerce Products in One Column on Mobile Devices - Divi Shop module default mobile

By default, the Divi Shop module will display two columns

To change this to a single column, open the Divi Shop module and add the CSS code to the Advanced tab > Custom CSS box/

 

As soon as the code is added, the Divi Shop module will display in a single column on mobile:

WooCommerce Products in One Column on Mobile Devices - Divi Shop module CSS added

Once the CSS is added to the Divi Shop module, the mobile display will show a single column

In just a few seconds, you would have fully transformed the mobile experience of your WooCommerce store. Now, your customers can see clearly which products you’re selling as they browse through your products.

Our Divi Shop Builder plugin helps you set the column count for your Divi and WooCommerce store without using code. Instead of working with lines of code you can simply set the number of columns you’d like for desktop, tablet and mobile using the Divi builder’s settings. Head to the Divi Space store to purchase the plugin.

Did you enjoy this Divi tutorial? Let us know which snippets you’d like us to create! Comment your snippet wish list below!

CSS

@media (max-width: 767px) {
 body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li.product, 
 body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li.product, 
 body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li.product, 
 body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li.product, 
 body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li.product, 
 body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li.product,  
 body.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li.product,  
 body.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-1 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-2 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-3 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-4 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-5 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-6 li.product {
        width: 100%!important;
        margin-right: 0%!important;
    }
}


@media all and (max-width: 767px) {
     .woocommerce-page ul.products li.product:nth-child(n) {
        margin: 0 0 11.5%!important;
        width: 100%!important;
    }
}

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.9.4 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment!

___

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, and Woocommerce Plugin by Automatic modified by Divi Space, November 5, 2020. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

18 Comments

  1. Tobias Zachl

    Still working, thanks!

    Reply
  2. sagar patel

    same. size woo-commerce products css code

    Reply
  3. Daphne

    Worked like a charm! Thanks

    Reply
  4. ZaZa Jack

    It works great!
    Is there similar css to do the same to categories which also show 2 columns on cell?
    Thanks

    Reply
  5. Penny Lamont

    Excellent thank you! Still working and I just added it to Divi Customizer > Custom css as someone else mentioned doing, then works site wide without having to add to each shop module.

    Reply
  6. Addison

    It works! Thanks guys!

    Reply
  7. Luuk

    This is just great! Worked perfectly for me. Thanks a lot!!

    Reply
  8. Aleksandra

    It still works. But now I wish to delete the code, but it does not change back to to products pr line? Why is this?

    Reply
    • <div class="apbct-real-user-wrapper">
    <div class="apbct-real-user-author-name">Anna Kurowska</div>
    <div class="apbct-real-user-badge" onmouseover="apbctRealUserBadgeViewPopup('apbct_trp_comment_id_655777');" onmouseout="apbctRealUserBadgeClosePopup(event);">
        <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img" style="align-self: center;">
        <div class="apbct-real-user-popup apbct-trp-popup-desktop" id="apbct_trp_comment_id_655777">
            <div class="apbct-real-user-title">
                <p class="apbct-real-user-popup-header">The Real Person!</p>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
                </div>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
                </div>
            </div>
        </div>
    </div>
    <div class="apbct-real-user-popup apbct-trp-popup-mob" id="apbct_trp_comment_id_655777">
        <div class="apbct-real-user-title">
            <p class="apbct-real-user-popup-header">The Real Person!</p>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
            </div>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
            </div>
        </div>
    </div>
</div>

      Hello, make sure to clear your cache after making changes.

  9. Craig Williams

    Yep it works. Awesome. I’ve spend almost a whole day banging my head on the keyboard. Great work guys. Gave you a plug in Dive Theme Users FB. Saved my b utt.
    Cheers

    Reply
  10. Atta rehman

    appreciated !

    Reply
  11. Herwin

    Hi,

    it does not work for me.

    Greetz!

    Reply
    • <div class="apbct-real-user-wrapper">
    <div class="apbct-real-user-author-name">Anna Kurowska</div>
    <div class="apbct-real-user-badge" onmouseover="apbctRealUserBadgeViewPopup('apbct_trp_comment_id_655781');" onmouseout="apbctRealUserBadgeClosePopup(event);">
        <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img" style="align-self: center;">
        <div class="apbct-real-user-popup apbct-trp-popup-desktop" id="apbct_trp_comment_id_655781">
            <div class="apbct-real-user-title">
                <p class="apbct-real-user-popup-header">The Real Person!</p>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
                </div>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
                </div>
            </div>
        </div>
    </div>
    <div class="apbct-real-user-popup apbct-trp-popup-mob" id="apbct_trp_comment_id_655781">
        <div class="apbct-real-user-title">
            <p class="apbct-real-user-popup-header">The Real Person!</p>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
            </div>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
            </div>
        </div>
    </div>
</div>

      Hi! Can you provide more information so we can help you? Link to the site would be helpful…

  12. Canna

    It’s rare that I comment on these types of sites but I had to say it DID work! I just applied this CSS to the Additional CSS area of the “Customizer” and it works without issue. And I am using a custom theme which had me worried. Thank you very much!

    Reply
    • Joshua

      Thanks for letting us know! Glad it worked for you.

  13. paul

    Wow. I don’t usually leave comments but this code worked a treat. THANK YOU

    Reply
  14. elan

    2021 April – works great

    Reply
  15. Antoine

    Yo ! Still working on 4.8.1. Thks guys !

    Reply

Submit a Comment

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

Next snippet Customize the WooCommerce Empty Shopping Cart Page
Previous snippet Change the WooCommerce Sale Badge to Display a Percentage Discount