- This topic has 19 replies, 2 voices, and was last updated 4 years ago by Tom.
-
AuthorPosts
-
May 24, 2018 at 11:08 am #583824Alberto
Hello
Is it possible to get a layout in the Woocommerce checkout page as seem here: https://prnt.sc/jm5qao
Where in left column are the billing details and in the right column the shipping details (if showed). And then, only in one column the payment methods and button.Thanks in advance!
May 24, 2018 at 9:09 pm #584122TomLead DeveloperLead DeveloperHi there,
This might help: https://generatepress.com/forums/topic/check-out-page/#post-486622
Let me know π
May 25, 2018 at 4:25 am #584310AlbertoHi Tom.
Thanks for your reply!
It works well. Only a small adjustment is needed for the responsive version.Regards
May 25, 2018 at 9:29 am #584549TomLead DeveloperLead DeveloperWhat about the responsive version? Any chance you can link me to your site?
March 3, 2020 at 10:46 am #1183869AlbertoHi 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!
March 3, 2020 at 5:21 pm #1184181TomLead DeveloperLead DeveloperHi there,
Does this help?: https://generatepress.com/forums/topic/checkout-trouble/#post-320295
Let me know π
March 5, 2020 at 9:27 am #1186148AlbertoHi 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?
March 5, 2020 at 5:49 pm #1186515TomLead DeveloperLead DeveloperHi there,
Any chance you can link me to your site with the CSS added so I can take a look?
Let me know π
March 6, 2020 at 9:00 am #1187213AlbertoHi 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
March 6, 2020 at 6:12 pm #1187518TomLead DeveloperLead DeveloperI 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?
March 8, 2020 at 4:35 am #1188488AlbertoHi 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
March 8, 2020 at 9:19 am #1188765TomLead DeveloperLead DeveloperAnd the code is added to ccanoura.com? I’m not seeing it in developer tools.
Can you try adding it in Customize > Additional CSS?
March 9, 2020 at 12:21 am #1189199AlbertoYes, please see this image.
Regards
March 9, 2020 at 8:00 am #1189770TomLead DeveloperLead DeveloperThat 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?
March 9, 2020 at 8:51 am #1189839AlbertoOk, 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
-
AuthorPosts
- You must be logged in to reply to this topic.