Snippets

Snippet: Display WooCommerce Checkout in Single Column

  • Updated:

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;
}
Learn how to add custom CSS to your site.
Back To Top