Skip to content

Snippet: Display WooCommerce Checkout in Single Column

By default the WooCommerce checkout page is split in 2 columns with Billing Details on the left and Additional Information on the right. However, you can easily make the checkout a single column using a little CSS.

.woocommerce .woocommerce-checkout .col2-set .col-1,
.woocommerce .woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
}

.woocommerce .woocommerce-checkout .col2-set .col-1 {
    margin-bottom: 30px;
}
Back To Top