customer_details in one column

Hi @hadeeldabbagh,

It sounds like you want to move the Order notes section at the bottom of the Billing details, right?

Link to image: https://i.imgur.com/7IlYCtG.png

I’ve found an interesting article that can let you achieve that by adding a PHP snippet to your functions.php file. Here’s the direct link:

https://www.businessbloomer.com/woocommerce-move-order-notes-checkout/

You could use a plugin such as Code snippets for that.

I hope this helps.

Hi @hadeeldabbagh,

Thanks for getting back.

I’ve tried the snippet on my test site and it worked smoothly. Now, it seems you would need to further customize the checkout page. Can you please share a link to your checkout so we can have a look and where possible provide further guidance?

Cheers!

Hi @hadeeldabbagh,

Thanks for sending over your website URL.

This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:

/* Billing details checkout page - full width column */
.oxy-woo-checkout .woocommerce .col2-set .col-1, .oxy-woo-checkout .woocommerce-page .col2-set .col-1, .oxy-woo-checkout .woocommerce .col2-set .col-2, .oxy-woo-checkout .woocommerce-page .col2-set .col-2 {
width: 100% !important;
}
/* Billing details checkout page - remove second column */
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
display: none;
}

This is what I’m seeing on my end:

Link to image: https://snipboard.io/SOPHuc.jpg

If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

Hope this helps.

Hey @hadeeldabbagh,

You’re most welcome! Thanks for confirming it worked.

I’ll go ahead and close the thread but if you have any further questions please open a new topic.

Cheers!