Woocommerce x Flatsome One Page Cart + Checkout

Make sure to follow all the steps carefully:
Remember that some pre-made templates don’t have all the files mentioned below, sometimes you don’t need to follow a specific step-by-step.

It’s mandatory to have the option “Auto update on quantity change” enabled on Flatsome > Theme Options > Woocommerce > Cart.

In order to have a friendly UX we recommend you to use the Sticky sidebar on checkout by going to Appearance > Customize > Woocommerce > Checkout > Sticky sidebar – bear in mind, it’s optional in this case, only a recommendation from our team.

HOW TO UPLOAD CSS

1. Copy CSS lines from the file
2. Paste it on Flatsome > Advanced > Custom CSS
3. Click to Update
4. Done!

/* One Page Cart + Checkout */
/** Open automatically Checkout Coupon **/
.checkout_coupon {
display: block !important;
}
.woocommerce-info {
display:none;
}

/** Cart on Checkout **/
.woocommerce .cart-auto-refresh {
max-width: 100%;
flex-basis: 100%;
}
.woocommerce .cart-collaterals {
display:none;
}
.continue-shopping .button-continue-shopping {
display: none;
}
.woocommerce-checkout-review-order-table .cart_item {
display:none;
}
.woocommerce-checkout-review-order-table thead {
display:none;
}
#order_review_heading {
display:none;
}

/** Customize Fields of Checkout **/
/** Cart Customize **/
.woocommerce-checkout-review-order-table thead {
display:none;
}
#order_review_heading {
display:none;
}
/** Cart on Checkout **/
/** Customize Fields of Checkout **/
.woocommerce-billing-fields__field-wrapper input, #coupon_code, .woocommerce-shipping-fields input, #order_comments_field textarea {
box-shadow: none;
border: 1px solid #dcdcdc;
padding: 20px 10px;
font-size: 14px;
}

.woocommerce-billing-fields__field-wrapper input:focus, #coupon_code:focus, .woocommerce-shipping-fields input:focus, #order_comments_field textarea:focus {
box-shadow: none;
border: 1px solid #1f1f1f;
}

/** Cart Customize **/
.is-form, button.is-form, input[type='submit'].is-form, input[type='reset'].is-form, input[type='button'].is-form {
border-radius: 10px;
}