[Resolved] Customise woocommerce checkout page column width

[Gilles]

Hi,
On the woocommerce checkout page, I would like to decrease the width of the first column (say to 40% of the total width + 5% margin on the right) and increase the width of the order summary (55%). https://i.imgur.com/LaYRzgJ.jpeg
I tried several css codes but it’s not responsive anymore…
Can you help me ?

[Ying]

Hi Gilles,

Try this CSS:

@media(min-width:769px) {
.woocommerce-checkout h3#order_review_heading {
    display: none;
}

.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: flex;
    justify-content: space-between;
}

.woocommerce-checkout div#customer_details {
    width: 40%;
    margin-right: auto;
}

.woocommerce-checkout div#order_review {
    width: 55%;
}
}

[Gilles]

Hi Ying,
Thank you for your reply.
But your code leaves a large space between the 2 columns: https://i.imgur.com/JMQ4lAb.jpeg

[Ying]

Can you link me to your checkout page?

[Gilles]

yes, of course : https://www.un-jardin-bio.com/commander/
To clarify my request, my goal is to widen the right column (so that it takes less height)

[Ying]

When I tested the code in the developer tool, it seems working well:
https://www.screencast.com/t/tSx8tXMu71u

Can you add the CSS to the top of your CSS field to eliminate syntax errors from your other CSS code?

[Gilles]

Sorry,
I forgot the end of the code
.woocommerce-checkout div#order_review {
width: 55%;
}
It works well.
Thanks a lot.

[Ying]

Glad to hear that 🙂

[Author]

Posts