Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 4, 2021 at 6:51 pm #1323523
    larosadigital

    Hello,

    Currently the WooCommerce checkout page of the Enfold has all of the information on a single column, with the order details listed below the billing details. This is quite non-standard and I’d like it to look like the default WooCommerce checkout page with the billing address info in one column and the items ordered and credit card fields on the righthand column.

    I have tried the following code, with no other plugins activated except WooCommerce, which I found on your forums as a solution from 2018, but it did not work to create two columns:

    #top.page-id-449 form.checkout.woocommerce-checkout #customer_details {
    width: 48%;
}

#top.page-id-449 form.checkout.woocommerce-checkout #customer_details .col-1 {
    float: none;
    width: 100%;
}

#top.page-id-449 form.checkout.woocommerce-checkout #order_review, 
#top.page-id-449 form.checkout.woocommerce-checkout #order_review_heading {
    clear: none;
    float: right;
    width: 48%;
}

    Frankly this seems like a bug – the single column checkout does not look good and totally changes the WooCommerce checkout flow to no one’s benefit. Can you please let me know what the fix is to revert to the default two-column layout? Thank you very much in advance!

    October 6, 2021 at 1:07 am #1323696
    larosadigital

    Bump… needed to renew my support license – did that so I hope you guys can answer now :)

    October 6, 2021 at 1:02 pm #1323765
    Mike

    Hi,
    Thank you for your patience, the css above that you found contains a page ID that probably didn’t match your site, please try this css.

    #top.woocommerce-checkout form.checkout.woocommerce-checkout #customer_details {
    width: 48%;
}

#top.woocommerce-checkout form.checkout.woocommerce-checkout #customer_details .col-1,
#top.woocommerce-checkout form.checkout.woocommerce-checkout #customer_details .col-2 {
    float: none;
    width: 100%;
}

#top.woocommerce-checkout form.checkout.woocommerce-checkout #order_review, 
#top.woocommerce-checkout form.checkout.woocommerce-checkout #order_review_heading {
    clear: none;
    float: right;
    width: 48%;
}

    This is the expected results:
    2021-10-06_002.png
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    October 7, 2021 at 8:56 pm #1323993
    larosadigital

    Thank you – that worked!

    October 8, 2021 at 11:39 am #1324077
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Need Two columns on WooCommerce checkout page’ is closed to new replies.