Display WooCommerce Products in Single Column on Mobile Devices

Last modified Sep 21, 2021

Difficulty: Beginner

Language: CSS

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.

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.

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:

On mobile, the same layout will display as follows:

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:

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.

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?

If you think this code saved you time, we will be happy to receive further feedback!