This code makes the checkout form one-column instead of two and moves the Additional Information section below the Billing Details.
Notes
The code should work on any WordPress site, not just those using the Divi theme, but adjustments might be needed.
Alternatively you can create your own custom checkout page using the theme builder and put the Woo sections wherever you want.
CSS Code
[css]
/*** MOVE ADDITIONAL NOTES BELOW BILLING DETAILS ON CHECKOUT PAGE ***/
@media only screen and (min-width: 981px) {
.woocommerce-checkout .col2-set {
display: -webkit-flexbox;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 {
width: 100%;
}
.woocommerce-checkout .col2-set .col-2 {
margin-top: 3rem;
}
div.woocommerce-billing-fields__field-wrapper {
display: -webkit-flexbox;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}
div.woocommerce-billing-fields__field-wrapper .form-row {
flex-basis: 48%;
}
}
[/css]
0 Comments