Two column checkout in WooCommerce

Is it possible to arrange the checkout in 2 columns?

Yes, here is the simple snippet which helps to add 2 columns. This is useful when you want to shorten some fields in the billing form. So let’s give it a try.

Please practice this code in your child theme style.css file

@media (min-width: 993px) {
	.woocommerce-checkout .col2-set .col-1 { 
           width:100%; 
	}
	  
	.woocommerce-checkout .woocommerce-billing-fields h3 { 
	   margin-top:40px; 
	}
			  
	.woocommerce-checkout .col2-set, 
	.woocommerce-checkout .col2-set { 
	   width:42%;
	   float:left; 
	}
			  
	#order_review_heading, 
	.woocommerce-checkout #order_review, 
	.woocommerce-checkout #order_review {
	   float:left;
	   width:42%;
	   margin-left:6%;
	}
	  
	.woocommerce-checkout h3#order_review_heading {
           margin: 18px 55px !important;		
	}		  
}

Edit WooCommerce Products from Frontend

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top