Make the WooCommerce Checkout Form Two Columns

On the classic WooCommerce checkout, the billing and shipping sections sit in two containers, .col-1 and .col-2, inside #customer_details, and WooCommerce places them side by side by default. These CSS rules change the layout: each section takes the full width, and the field rows inside are capped at half width so the fields can sit in two columns. A second block switches back to one column on phones.

Add both blocks to your child theme’s style.css or the Customizer’s Additional CSS panel.

Desktop layout

/*checkout page css*/

body.woocommerce-checkout .woocommerce-checkout #customer_details .col-1, 
body.woocommerce-checkout .woocommerce-checkout #customer_details .col-2 {

    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}

.woocommerce-billing-fields__field-wrapper p,
.woocommerce-shipping-fields__field-wrapper p {
    max-width: 50% !important;
}

.woocommerce-billing-fields input,
.woocommerce-shipping-fields input {
    display: inline-block;
}

• The first rule sets flex-basis and max-width to 100% for .col-1 and .col-2, which matters when your theme lays out #customer_details with flexbox or a grid that uses those class names, as Bootstrap 4 themes do (see fixing Bootstrap 4 conflicts on WooCommerce forms). The body.woocommerce-checkout prefix keeps it on the checkout page.
• The second rule caps every field row (the p elements) in the billing and shipping field wrappers at 50% width. !important overrides widths set by WooCommerce or your theme.
• The third rule makes the inputs inline-block.

How the half-width rows line up depends on your theme’s form styles, so check the result in the browser and adjust if needed.

Mobile layout

/* Mobile Layout: 767px. */
@media only screen and (max-width: 767px) {

    .woocommerce-billing-fields__field-wrapper p,
    .woocommerce-shipping-fields__field-wrapper p {
        max-width: 100% !important;
    }

    .woocommerce-billing-fields input,
    .woocommerce-shipping-fields input {
        display: block;
    }

}

Up to 767 pixels wide, the field rows go back to full width and the inputs to display: block, so every field gets its own line. Change 767px if your theme uses a different breakpoint.

These rules are written for the shortcode-based checkout. The Checkout block uses different markup, so they won’t affect it.

For a checkout layout designed and built around your store rather than adjusted with CSS, see my WooCommerce development services.

Related articles

• showing the coupon form right before the order table: another classic checkout layout change
• bringing back cart thumbnails on phones: responsive WooCommerce CSS with the same 767px breakpoint