Skip to content

Instantly share code, notes, and snippets.

@grantambrose
Created August 12, 2016 16:32
Show Gist options
  • Save grantambrose/d1bff123dd494e3049afe55dc3e51263 to your computer and use it in GitHub Desktop.
Save grantambrose/d1bff123dd494e3049afe55dc3e51263 to your computer and use it in GitHub Desktop.
Create a two column WooCommerce Checkout Page to streamline purchasing
/* 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%;}
}
@lionel1702
Copy link

lionel1702 commented Aug 26, 2021

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%;
    }
}

@ZJ-7
Copy link

ZJ-7 commented Sep 2, 2021

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

@coccoinomane
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment