Put cart summary in two columns nd mulit rows?

[Alliance]

Hi Guys,

How to put cart summary in two columns and mulit rows to look more professional.

Thank you

allianceautoproducts.com

[LitCommerce]

Hi @Alliance ,

Please explain more about the cart summary, if possible, please send me a screenshot with the detailed description, and I will help you to check it

[Alliance]

Hi,

I need to put the cart summary in a table, for example in the first colum, first row “Regular Price Title” then in the Second Column firs row t the “Regular Price Value”, and so on for the rest of the cart summary

[LitCommerce]

Hi @Alliance ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

.cart__footer .cart-subtotal h2 {
   display: inline-block !important;
}
.cart__footer .cart-subtotal__price {
   padding-left: 15px !important;
   min-width: auto !important;
}

It will show like this:

Hope it helps!

[Alliance]

Yeeees! can you align text to the left and put the grid on? Thank you

[LitCommerce]

Hi @Alliance ,

Please add code:

.cart__footer .cart-subtotal {
    width: 235px;
    margin-left: auto;
    text-align: left;
    padding: 0 15px;
    border: 1px solid #7b6e6e;
    border-top: 0;
    max-width: 100%;
}
.cart__footer .cart-subtotal:first-child {
    border-top: 1px solid #7b6e6e !important;
}
.cart__shipping {
    width: 235px;
    margin-left: auto;
    text-align: left;
    padding: 15px;
}

Hope it helps!

[Alliance]

It didn’t work out

[LitCommerce]

Hi @Alliance ,

Please change code here:

235px => 250px

[Alliance]

[LitCommerce]

Hi @Alliance ,

You have add ‘;’ after 250px ?

[Alliance]

[LitCommerce]

Hi @Alliance ,

It’s not like that, you just need to change this:

Refer code:

.cart__footer .cart-subtotal {
    width: 250px;
    margin-left: auto;
    text-align: left;
    padding: 0 15px;
    border: 1px solid #7b6e6e;
    border-top: 0;
    max-width: 100%;
}
.cart__footer .cart-subtotal:first-child {
    border-top: 1px solid #7b6e6e !important;
}
.cart__shipping {
    width: 250px;
    margin-left: auto;
    text-align: left;
    padding: 15px;
}

[Alliance]

Should looklike an excel sheet

[Alliance]

Regular Price	22222
Your Savings	33333
Subtotal	5555555

[LitCommerce]

Hi @Alliance ,

Please change all code:

.cart__footer .cart-subtotal {
    width: 290px;
    margin-left: auto;
    text-align: left;
    padding: 0 15px;
    border: 1px solid #7b6e6e;
    border-top: 0;
    max-width: 100%;
	display: flex;
}
.cart__footer .cart-subtotal:first-child {
    border-top: 1px solid #7b6e6e !important;
}
.cart__shipping {
    width: 290px;
    margin-left: auto;
    text-align: left;
    padding: 15px;
}
.cart__footer .cart-subtotal h2 {
    width: 55%;
    margin: 0 !important;
    padding: 12px 0 !important;
    height: 100%;
	text-align: right;
}
.cart__footer .cart-subtotal h2:first-child {
    border-right: 1px solid #7b6e6e;
	width: 45% !important;
    text-align: left !important;
}

it will show like this

[Alliance]

Yeees! Great job.

[Alliance]

Hi, how are you? after adding your code I got this error in cart page:

I don’t know why the translation is required. You added the code on cart liquid, you should add the schema without any translate code. If you added the translate code, you should add the translation for “Cancel”.

[LitCommerce]

Hi @Alliance ,

There was confusion here, CSS code will never affect Translation code, you can ask any other expert.

I checked and it looks like you still haven’t entered the full language at, refer:

Hope it is clear to you.

[Alliance]

Hi,

Just noticed that the summary is not in the middle of the screen, mobile view.

[Alliance]

or better expand summary text cells " Regular price" etc…