Move Additional Information Below Billing Details on WooCommerce Checkout Page

May 21, 2023

Updated Jan 2024

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

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

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.