Solved

Cart Page Estimated Total

Voldiep
Tourist
14 0 0

Good day, 

I hope you can help. 

I have edited the cart page to include VAT and Total Price Including VAT below the original Estimated total (refresh theme). I am editing duplicate to ensure the store is not affected. 

When I am trying to align or change the text weight, the 'subtotal' which standard Shopify text does not change. How can I edit all at once? 

Thank you

In addition, to make it nice and clear, I would like to align text on the left and price on the right, is it doable? see example below 

Voldiep_1-1715463605682.png

example 

Voldiep_2-1715463765761.png

 

 

 

Accepted Solution (1)
Dawood_Mirza_
Excursionist
68 12 20

This is an accepted solution.

@Voldiep ,

Sure I have added the code it will set a font size of 1.6rem to all (since VAT and Total were already 1.6 rem)

totals__total{
   font-size : 1.6 rem
}
totals__total-value{
   font-size : 1.6 rem
}
totals__label{
font-weight : bold;
}

 This font weight will affect VAT: and Total:
choose font weight according to your preference you'll have to match it with subtotal
Here is the list of values you can use 

Dawood_Mirza__0-1715574749336.png

 

If I was able to help you please mark this as a Solution and feel free to ask any question regarding this or any other query

BR 

Dawood Mirza

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.

View solution in original post

Replies 6 (6)

Dawood_Mirza_
Excursionist
68 12 20

Hi Voldiep,

I would recommend, the elements you created for the Vat and total amount give those the same class as the already total one this way it will automatically align itself 

 

If it does not works drop me store link
Also, why didnt you enabled charge tax option while product listing and set tax % there??


BR 

Dawood Mirza

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
Voldiep
Tourist
14 0 0

@Dawood_Mirza_  hi. 

Thank you for the reply. 

If I assign same class, it would put 'subtotal' before vat and total amount. Your advice and guidance would be appreciated. 

The store: https://www.firstgearup.co.uk/cart
Password: whatwhat

Answering your question, we are planning to sell to trade and general public, enabling incl. TAX option would not be clear for trade and vise versa. On product page we have 2 prices, but the cart page was ever so confusing with the limited information it would have provided our customers with. 

Dawood_Mirza_
Excursionist
68 12 20

Dawood_Mirza__0-1715517945498.png

You want to achieve this ( I suppose )
you added this code in component-total.css
@media all and (min-width: 750px) {
.totals {
justify-content: flex-end;
}
}
just replace plex end with space-between


Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
Voldiep
Tourist
14 0 0

Hi @Dawood_Mirza_ 
Thank you, that solve first half of the problem, I appreciate this. 
Any ideas how can I make all the text same size/weight? Currently it looks awful... Thank you for help. 

Voldiep_0-1715547898714.png

 

Dawood_Mirza_
Excursionist
68 12 20

This is an accepted solution.

@Voldiep ,

Sure I have added the code it will set a font size of 1.6rem to all (since VAT and Total were already 1.6 rem)

totals__total{
   font-size : 1.6 rem
}
totals__total-value{
   font-size : 1.6 rem
}
totals__label{
font-weight : bold;
}

 This font weight will affect VAT: and Total:
choose font weight according to your preference you'll have to match it with subtotal
Here is the list of values you can use 

Dawood_Mirza__0-1715574749336.png

 

If I was able to help you please mark this as a Solution and feel free to ask any question regarding this or any other query

BR 

Dawood Mirza

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
Voldiep
Tourist
14 0 0

@Dawood_Mirza_  Thank you a lot for the help, you've solved the mystery!! 🙂 Thank you