Split Woocommerce Checkout

[smokingjacket]

Hello,

I am attempting to split my woocommerce checkout so that the totals appear on the right hand side and the forms on the left. I am using the following code, which only partially seems to work, does anyone have any ideas?

Thanks,

Smokingjacket

/Checkout/
/* 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%;}

}

[thai]

Hi @smokingjacket,

It’s conflicted with your custom CSS:

.woocommerce-checkout form.woocommerce-checkout {
    display: flex;
    flex-direction: column;
}

.woocommerce-checkout form h3 {
    order: 1;
    margin-top: 0;
}

.woocommerce-checkout #order_review {
    order: 2;
    margin-bottom: 30px;
}

.woocommerce-checkout #customer_details {
    order: 3;
    float: right;
}

The float CSS is not working for flex display.

Regards!

[smokingjacket]

Hi @Thai,

Thanks very much for getting back to me. Is it possible to have it split in two as per my first point but also change the order in which the forms appear as per the custom code you posted?

Thanks very much!

[thai]

Hi @smokingjacket,

Did you want to change the order of elements on mobile screen sizes only?

Please update your custom CSS to this:

@media (max-width: 767px){
.woocommerce-checkout form.woocommerce-checkout {
    display: flex;
    flex-direction: column;
}

.woocommerce-checkout form h3 {
    order: 1;
    margin-top: 0;
}

.woocommerce-checkout #order_review {
    order: 2;
    margin-bottom: 30px;
}

.woocommerce-checkout #customer_details {
    order: 3;
    float: right;
}
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.