How to edit Dawn theme code for price comparison display?

[aptelht]

Hello, how do I edit the code in Dawn theme to display "compare at price" on Cart Page & Checkout? Also, I want the sale price to be red, and compare at price black, just like in the first picture on the product page.

 

 

 

[wattsmork · Accepted solution]

Hello @aptelht 

Here is the solution for your problem.

Please add below code in the sections/main-cart-items.liquid file

<div class="product-option">
  {%- if item.original_price == item.variant.compare_at_price -%}
    {{ item.original_price | money }}
  {%- else -%}
    <span class="price-compare">
      {{ item.variant.compare_at_price | money }}
    </span>
    <span class="price-origin">
      {{ item.original_price | money }}
    </span>
  {%- endif -%}
</div>

 Instead of this code

<div class="product-option">
  {{ item.original_price | money }}
</div>

 And add this code snippet to assets/component-cart-items.css file

.product-option .price-compare {
  text-decoration: line-through;
  margin-right: 4px;
}

.product-option .price-origin {
  color: #FF1111;
}

Above solution is for cart page.

It is impossible to customize checkout page price.

Hope this helps you.

Regards

Please fill free to contact me if you need more help.

[AntonyBlackett]

This works, however there seems to be a bug when using a territory that has tax and then adjusting the quantity.

With EU selected VAT is included in the base price and the new discounted price as expected but when I adjust the quantity the page refreshes, 'including tax' disappears and the original price displays without tax included but the discounted price still displays with tax included.
(This is on each individual item's prices the totals still remain correct)

Refreshing the page then restores the correct tax included price.

Any ideas?

[maudrustemeijer]

Hi!

Thank you for your answer on the question above. Now I have both the prices in the cart, but I was wondering if its possible to get a line through the original price? 
When I try this my self with codes, it doesn't work. 

Thank you for your time.

Kind regards.

[CHASN]

This is Perfect! Thanks a lot. 

Question: How can we do it also with the price for the total cost? for example: Buy 4 products, 2 for 50 euro's instead of 100 euro's (200 euro cross, 100 euro price) each and 2 for 500 euro's each (1000 euro price). 

So the price is: 1200 euro's is the one is crossed and the price with the discount is: 1100 euro's without crossed in red . 

Hope you understand 😉

[nijntjelover]

I tried this but it didnt work for me! website url: bundo.nl
could you help me out? thanks!

Your code only worked if there was multiple items selected in the cart that were on discount with the kaching bundle app. 

[ashpreetkohli]

Tried following the steps but it doesn't work on the latest dawn theme.

Or could you please provide more clear instructions on where exactly to paste the snippet code, thanks

.product-option .price-compare { text-decoration: line-through; margin-right: 4px; } .product-option .price-origin { color: #FF1111; }

[maurowolters]

Please can you help me with the same problem, I would like to see the compare at prace and the original price in the cart