Solved

How to edit Dawn theme code for price comparison display?

aptelht
New Member
18 0 0

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.

1.JPG

2.JPG

3.JPG

Accepted Solution (1)

wattsmork
Shopify Partner
26 8 7

This is an 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.

View solution in original post

Replies 6 (6)

wattsmork
Shopify Partner
26 8 7

This is an 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
Visitor
2 0 0

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
Visitor
1 0 0

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
Tourist
5 0 1

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
Explorer
62 0 12

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
Excursionist
13 0 4

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; }