The Goal:
Update the layout of the WooCommerce checkout page to be more user friendly in 2 columns

The out of the box WooCommerce layout doesn’t make good use of the right column in its two column layout for the checkout page. Adding this CSS to your stylesheet will fix it up!

Requirements:

  • CSS

Original Post

Before

After

CSS Styles

Add this to your stylesheet.

/* -----CHECKOUT----- */
.woocommerce form .form-row {
    width: 100% !important;
}
.woocommerce-checkout #payment div.payment_box input.input-text, .woocommerce-checkout #payment div.payment_box textarea {
    width: 100% !important;
    padding: 8px;
}
.woocommerce #payment .form-row select, .woocommerce-page #payment .form-row select {
    width: 100%;
    height: 30px;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
    float: left;
    width: 100%;
}
.custom-checkout h3 {
    background-color: #165f1c; /****CHANGE TO COLOR YOU WANT TO USE FOR TITLE BACKGROUND ****/
    width: 45%;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin-top: 50px;
    color: #FFF;
    float: right;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
    padding: .6180469716em;
    background-color: #f2f2f2;
    color: #43454b;
    outline: 0;
    border: 0;
    -webkit-appearance: none;
    border-radius: 2px;
    box-sizing: border-box;
    font-weight: 400;
    border: solid 2px #e4e4e4;
}

#wc_checkout_add_ons {
    width: 45%;
    float: right;
    text-align: center;
}

@media screen and (min-width: 980px) {
    .woocommerce-shipping-fields h3, .woocommerce-billing-fields h3 {
        width: 100%;
    }
    .woocommerce .col2-set, .woocommerce-page .col2-set {
        width: 45%;
        float: left;
    }
    .woocommerce-checkout-review-order {
        width: 45%;
        float: right;
    }
}
@media screen and (max-width: 979px) {
    .custom-checkout h3 {
        width: 100%;
    }
}

Where (or to which) stylesheet do you add this CSS code?

If you use a page builder like Elementor or Divi, you can add the CSS code in their built-in “stylesheet.” For Divi, navigate to Divi > Theme Options > General > Custom CSS in your WordPress dashboard. With Elementor, you can add CSS by going to Elementor > Custom CSS.
If you have a child theme enabled or an older WordPress site without a builder, you can add the CSS code to your child theme’s stylesheet using an FTP client. This file is usually found in public_html > wp-content > themes > yourtheme-child > style.css.

Tip: Avoid adding code to the main theme because it’s wiped out when your theme updates.

Share This