Make Woocommerce Checkout Page In Two column

Share Now

#Add this CSS

/*checkout page css*/

body.woocommerce-checkout .woocommerce-checkout #customer_details .col-1, 
body.woocommerce-checkout .woocommerce-checkout #customer_details .col-2 {

    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}

.woocommerce-billing-fields__field-wrapper p,
.woocommerce-shipping-fields__field-wrapper p {
    max-width: 50% !important;
}

.woocommerce-billing-fields input,
.woocommerce-shipping-fields input {
    display: inline-block;
}

#Responsive CSS

/* Mobile Layout: 767px. */
@media only screen and (max-width: 767px) {

    .woocommerce-billing-fields__field-wrapper p,
    .woocommerce-shipping-fields__field-wrapper p {
        max-width: 100% !important;
    }

    .woocommerce-billing-fields input,
    .woocommerce-shipping-fields input {
        display: block;
    }

}
Picture of Nahid Mahamud

Nahid Mahamud

Web Developer | Graphic Designer | WordPress & Woo-commerce Expert