Unabel to change Checkout Page Columns

Hey, I have tried to manually change the column size of Checkout Page Columns but its not changing the design. By default it is “col-sm-6 & col-sm-6” I want it them be:

• col-lg-8 col-md-8 col-sm-12 col-xs-12 on Billing Columns
• col-lg-4 col-md-4 col-sm-12 col-xs-12 on Order Details Columns

Hello,

You can edit this page content and HTML markup in the file woodmart/woocommerce/checkout/form-checkout.php.

Regards

I have changed the layout but it doesn’t change the layout. Instead it gives 100% width to both. Please see the screenshot attached.

Attachments:

You must be logged in to view attached files.

Try to add the following code snippet to the Custom CSS for desktop devices area in Theme Settings

form.checkout>.col-sm-6:first-child {
   flex: 1 1 66%;
   max-width: 66%;
   width: 66%;
}

form.checkout>.col-sm-6:last-child {
   flex: 1 1 34%;
   max-width: 34%;
   width: 34%;
}

And this part for tablet and mobile devices

form.checkout>.col-sm-6:first-child,
form.checkout>.col-sm-6:last-child {
   flex: 1 1 100%;
   max-width: 100%;
   width: 100%;    
}

Thank You! You’re awesome!

You are welcome! 🙂

[Author]

Posts