[Resolved] Woocommerce checkout layout

Home Forums Support [Resolved] Woocommerce checkout layout

Home Forums Support Woocommerce checkout layout

  • This topic has 19 replies, 2 voices, and was last updated 4 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #583824
    Alberto

    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!

    #584122
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    Let me know πŸ™‚

    #584310
    Alberto

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

    Regards

    #584549
    Tom
    Lead Developer
    Lead Developer

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

    #1183869
    Alberto

    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!

    #1184181
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    Let me know πŸ™‚

    #1186148
    Alberto

    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?

    #1186515
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    Let me know πŸ™‚

    #1187213
    Alberto

    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

    #1187518
    Tom
    Lead Developer
    Lead Developer

    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?

    #1188488
    Alberto

    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

    #1188765
    Tom
    Lead Developer
    Lead Developer

    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?

    #1189199
    Alberto

    Yes, please see this image.

    Regards

    #1189770
    Tom
    Lead Developer
    Lead Developer

    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?

    #1189839
    Alberto

    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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.