Customize WooCommerce Cart Layout

Support
#1

Hello…

Does anyone know of any extensions that let you manipulate the checkout page layout?
WooCommerce shortcode is for the full page, not it’s separate components.
I just want to make it two columns.

Column One being Billing and Shipping info.
Column Two being the order summary and payment.

I tried CartFlows extension, but the payment area doesn’t work properly.
You can tab into the payment fields, but not click on most of them.

I’m just needing a simple solution to prevent the checkout from looking as plain and awful as it does standard.
Without having to custom code or hire someone.

Any ideas?

Jesse

#2

Nevermind, I found one that works called AERO.

#3

Hey Jesse,

By default, the check out page is built in fullwidth. If you want to have two columns in the check out page, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(min-width: 980px){
    .woocommerce-checkout #customer_details .col-1,
    .woocommerce-checkout #customer_details .col-2 {
        float: left;
        width: 48%;
        margin-right: 4%;
        margin-bottom: 2em;
    }

    .woocommerce-checkout #customer_details .col-2 {
        margin-right: 0;
    }   
}

We would love to know if this has worked for you. Thank you.

#4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.