[Resolved] WooCommerce checkout order-received page layout – possible bug

[Manuel]

Hi

if I enable the GP Premium WooCommerce module, the “checkout/order received” page is not displayed correctly. Once the module is disabled, everything seems to work as it should.
Using GP Theme 3.1.1 & GP Premium 2.1.1

Enabled GP WooCommerce Module: https://imgur.com/jHPslbi
Disabled GP WooCommerce Module: https://imgur.com/jHPslbi

Could you have a look at this?
Thanks

[Ying]

Hi Manuel,

That’s the style added by GP Woocommerce module.

Would you like to remove the style for checkout page?

[Manuel]

Hi Ying,

thanks for your fast answer.
No i don’t want to remove the style for the checkout page.
If you have a look at the main segment you can see, that the height does not fit.
The invoice & delivery address is located on the outside of the container.
Check where the white background color of the main container ends.
The entire billing/delivery address block should be inside the main segment

Check the image, I’ve highlighted the main container: https://imgur.com/R6rMMPk

Best
Manuel

[Ying]

Hum.. it does look like a bug, thanks for reporting it to us, we’ll look into it.

For now, you can use this CSS:

.woocommerce-checkout .col2-set {
    float: none;
}

[Manuel]

Your CSS works. Thanks. 🙂

[Ying]

You are welcome 🙂

[Abhishek]

Hey,
Thanks Manuel for opening up this Topic for layout issues.
I am having the same issue and thanks to Ying have managed to temporarily sort it using the CSS.

Any word on a permanent fix or update?

Best Regards,
Abhishek V.

[Tom]

Hi there,

This bug is scheduled to be fixed in GPP 2.2.0.

Thanks!

[Abhishek]

Thanks Tom for the update!
That’s great!

[Tom]

Is this still an issue in the latest WooCommerce? I’m not able to reproduce on my end when viewing the Order Received page.

[Manuel]

Hi Tom,
yes, this is still reproducible. the .woocommerce-customer-details section is still located outside of the .site-main if you do not set

.woocommerce-checkout .woocommerce-customer-details .col2-set {
float: none;
}

[Tom]

Strange, I’m not able to reproduce on my end. Is there any chance you can link me to a page where I can see it?

[Manuel]

I just added a dev site.

[Tom]

Thanks for that!

This will be the CSS in GP Premium 2.2.0:

.woocommerce-order-received .woocommerce-customer-details .col2-set{float:none;width:auto}
.woocommerce-order-received .woocommerce-customer-details .col2-set .col-1{margin-bottom:1.5em}

[Author]

Posts