Woocommerce checkout layout

Hi there,

This might help: https://generatepress.com/forums/topic/check-out-page/#post-486622

Let me know :)

Hi Tom.
Thanks for your reply!
It works well. Only a small adjustment is needed for the responsive version.

Regards

What about the responsive version? Any chance you can link me to your site?

Hi Tom!
This is about the checkout page layout with the WooCommerce addon activated.
I'm trying to get the same layout as with the WooCommerce addon deactivated but, obviously, using the WooCommerce addon, so the problem is the order details are placed in the right column and I want them in the bottom using the full width.
I was trying with this code (https://generatepress.com/forums/topic/check-out-page/#post-486622) but it doesn't work for me now.

Any thoughts?

Thanks in advance!

Hi there,

Does this help?: https://generatepress.com/forums/topic/checkout-trouble/#post-320295

Let me know :)

Hi Tom
Thanks for your reply, but I'm affraid it doesn't work.
The problem with the CSS you suggest is only a piece of the your order block is placed below, the title (h3) remains in the right column (please, see the image). Also the shipping details remains in the left column, because col-2 is in col2-set, and I want it in the right column.

Any thoughts?

Hi there,

Any chance you can link me to your site with the CSS added so I can take a look?

Let me know :)

Hi Tom!
I'm developing the website in my local server, but you can take a look at ccanoura.com, where I've added the same CSS you've suggested me.
Let me know if you need any other thing.

Thanks

I just added this CSS using developer tools and it fixed it:

.woocommerce .col2-set, 
.woocommerce-page .col2-set,
#customer_details+#wc_checkout_add_ons, 
#order_review, #order_review_heading {
    float: none;
    width: 100%;
}

How are you adding the CSS?

Hi Tom.
I've added it via CSS file.
The heading (h3) is in the right column, and the shipping fileds are in the left column (I want them in the right one).
I've checked in Chrome and Firefox and I'm still watching all these fields in the wrong place. Only the order_review div in placed as I want.

Regards

And the code is added to ccanoura.com? I'm not seeing it in developer tools.

Can you try adding it in Customize > Additional CSS?

Yes, please see this image.

Regards

That doesn't look like the full code: https://generatepress.com/forums/topic/woocommerce-checkout-layout/#post-1187518

Can you make sure to add it fully?

Ok, I 've added it.
I'd added it before (but I deleted the rules that didn't concern it), it didn't work, and obviously it still doesn't work now.

Regards