Create a two column WooCommerce Checkout Page to streamline purchasing

style.css

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 993px) {

	/* ---------------------
        WOOCOMMERCE
        --------------------- */
        body .woocommerce .col2-set .col-1{width:100%;}
        .woocommerce-billing-fields h3{margin-top:40px;}
        .woocommerce .col2-set, .woocommerce-page .col2-set{width:48%;float:left;}
        #order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review{float:left;width:48%;margin-left:2%;}

}

Hi Grant, almost 5 years later I found this page, awesome, still works even after many WooCommerce updates! Thanks a lot for sharing!

That’s so good lol

…

On Thu, 20 Aug 2020 at 10:27 am, Daniel Sami ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Hi Grant, almost 5 years later I found this page, awesome, still works even after many WooCommerce updates! Thanks a lot for sharing! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/d1bff123dd494e3049afe55dc3e51263#gistcomment-3424049>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADGKEUSEBMF3OP25MBIVXNLSBRUVLANCNFSM4MG2EGDA> .

Worked! I don't know why all the checkout information displays in one-column... this fixed it.

all right fellas, if additional information field is showing short, centralized like the screenshot above from @vincenzoquarta , just add this code and play with the numbers until you get it aligned.

.woocommerce-additional-fields {
left: -272.578px;
position: relative;
top: 0.5px;
width: 530px;
}

Taking reference from here and also other articles, here is my version

#place_order {
	width:100%
}

.woocommerce-form-login label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme {
   margin-top: 12px;
}

@media (min-width: 768px){
    #customer_details{
        width: 60%;
        float: left;
    }
    #order_review_heading{
        width: 30%;
        float: left;
		margin-left:2%;
    }
    #order_review{
        width: 38%;
        float: left;
		margin-left:2%;
    }
    .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%;
    }
}

In addition to the original, I added the below code and looks perfect to me
.woocommerce-page .cart-collaterals .cart_totals{ width:100%; }

Thanks @lionel1702! Your version works flawlessly on WordPress 5.6.0 👍