Custom css for woocommerce cart resets on update cart

[mwr1701]

I found a thread discussion on changing the woocommerce cart to a two colum format using flex box. Works great! However, when update cart is pressed, the cart page goes back to its default format. All custom CSS to create the two column format is lost.

It seems that many people want the two column cart format, but I can’t find any threads that go to a complete solution.

Screen shots included (ignore the horrible colors, using those to make sure my selectors are correct)

[prakash_s]

Hello @mwr1701,

Thanks for writing to us.

To get the cart page layout in two columns you need to add this custom CSS code under X/Pro–>Theme Option —>CSS

form.woocommerce-cart-form {
    width: 66.66%;
    float: left;
}
.woocommerce .cart-collaterals {
    margin-top: 0px;
    padding-top: 0px;
    width: 33.33%;
    float: right;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[mwr1701]

@prakash_s

form.woocommerce-cart-form {
    width: 66.66%;
    float: left;
}
.woocommerce .cart-collaterals {
    margin-top: 0px;
    padding-top: 0px;
    width: 33.33%;
    float: right;
}

Thanks! I do have knowledge of CSS and the inspect elements… use them a lot… I could have sworn I had it set that way at least once over the past several days, but the columns were not collapsing on smaller devices as expected. But it seems to be doing the trick now. I tried the update cart button, and on smaller screens. Two columns stays on when on larger screens, and they collapse on smaller.

Thanks again!

[marc_a]

Hi @mwr1701,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.