Shopping Cart & Woocommerce 3-Step Checkout Layout

Hello,

Cart and checkout pages are default pages so can’t be edited using Visual Composer.
Please provide me link to your site, so I could help you with css code.

Regards

Could you provide me temporary admin panel access? http://prntscr.com/gq93wj

Regards

1. You may use this code:

.step-wrapper #billing_city_field {
    width: 50%;
    padding-right: 10px;
}
.step-wrapper #billing_postcode_field {
    width: 50%;
    padding-left: 10px;
}
.step-wrapper #billing_email_field {
    width: 100%;
    padding-left: 0;
}

2.

.woocommerce-checkout .col-lg-5.col-md-5 {
    width: 100%;
}
#prev-step-payment {
    color: #fff;
    padding: 6px 18px;
    display: inline-block;
    background-color: #262626;
}
#order_payment_heading {
    border-bottom: 1px solid #e8d4d4;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

3.

.woocommerce .addresses h4 {
    border-top: 1px solid #e8d4d4;
    margin-top: 20px;
    padding-top: 20px;
}
.woocommerce .addresses {border-bottom: 1px solid #e8d4d4;}
.woocommerce-checkout .shop_table {
    background-color: white;
}
.woocommerce-checkout .shop_table td.product-name {
    width: 60%;
}
.woocommerce-checkout .wpf-umf-cart-upload-button.button {
    background-color: gainsboro;
    color: black !important;
}
.woocommerce-checkout .wpf-umf-cart-upload-button.button:hover {
    color: white !important;
}
#prev-step-order {
    color: #fff;
    padding: 6px 18px;
    display: inline-block;
    background-color: #262626;
}
.woocommerce-checkout .place-order.wc-gzd-place-order {
    float: right;
}
#order_review .legal {
    width: 100%;
}

4.

.cart-item-details {
    text-align: left;
}
.wpf-umf-cart-upload-button-container a {
    background-color: gainsboro;
    color: black !important;
}
.wpf-umf-cart-upload-button-container a:hover {
    color: white !important;
}
.woocommerce-cart-form__cart-item.cart_item td {
    vertical-align: top !important;
}
.woocommerce-cart .do-x-col .col-md-6 {
    margin-top: 20px;
    margin-right: 50%;
}

Regards

You’re welcome!

Regards

Dear Bleausard,

Thanks for being part of our WordPress & WooCommerce community!

We’re happy we could assist you. Your feedback truly matters — it helps us make XStore better, faster, and more reliable with every release.

Leave Feedback →
(takes less than a minute)

Together, we’re shaping a better WooCommerce experience for everyone.

Topic closed.
The 8Theme Team