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){
        width: 60%;
        float: left;
        width: 30%;
        float: left;
    padding-left: 30px;
        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.





Subscribe to our newsletter!

Get the latest tutorials and articles right into your inbox!

0 comment


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