Recommended WordPress Theme

Two-column checkout page for the Divi theme

5 days ago by Tamas

The default WooCommerce checkout page is not the best from a UX point of view. It’s a one-column layout and contains so much information and fields that it makes it quite uncomfortable to use.

Luckily with a few lines of css code we can turn this layout into a two-column layout that is more appealing for the customer and most likely better for conversion. We will make something like this:

Divi theme two-column checkout layout

All we need to do is add the following css code to our theme. If you are using the Divi theme, just go to “Admin” -> “Divi” -> “Theme Options”. scroll down and copy the following code to your custom css box.

@media (min-width: 768px){
    #customer_details{
        width: 60%;
        float: left;
    }
    #order_review_heading{
        width: 30%;
        float: left;
    padding-left: 30px;
    }
    #order_review{
        width: 40%;
        float: left;
        padding-left: 30px;
    }
    .woocommerce table.shop_table td{
        width: 50%;
    }
    .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
    .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2{
        width: 100%;
    }
}
.woocommerce-additional-fields__field-wrapper {
    margin-bottom: 30px;
}

This code was tested with the Divi theme, but it is likely to work with most themes.

 

 

 

SHARE:

Subscribe to our newsletter!

Get the latest tutorials and articles right into your inbox!


0 comment

LEAVE A REPLY

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