How to show the 'sale price' discount on cart page?

Solved
New Member
2 0 0

@BrianAtWork That was clean and clear! :)

I am trying to do the same for Turbo, could you please help me?

Thank you!

0 Likes
Excursionist
21 0 4

Hi Brian, 

This is exactly what I am trying to achieve on my site. I am using the Annabelle theme. Here is my cart.liquid below, would you be able to take a look? Thanks

<!-- /templates/cart.liquid -->
{% comment %}

For info on test orders:
- General http://docs.shopify.com/manual/your-store/orders/test-orders
- Shopify Payments - http://docs.shopify.com/manual/more/shopify-payments/testing-shopify-payments

{% endcomment %}

{% include 'breadcrumbs' %}

<div class="{{ settings.theme_layout_type }}">
<div class="row">
<div id="main" role="main" class="col-sm-12 wrap-page">

{% if cart.item_count > 0 %}

<form action="/cart" method="post" novalidate class="cart ">

<h1>{{ 'cart.general.title' | t }}</h1>

<div class="row hidden-xs">
<div class="col-sm-6">
{{ 'cart.label.product' | t }}
</div>
<div class="col-sm-2">
{{ 'cart.label.price' | t }}
</div>
<div class="col-sm-2">
{{ 'cart.label.quantity' | t }}
</div>
<div class="col-sm-2">
{{ 'cart.label.total' | t }}
</div>
</div>

<hr>

{% for item in cart.items %}
<div class="row">
<div class="cart-line">
<div class="product-line col-sm-6">
<div class="cart-product-image">
<a href="{{ item.url | within: collections.all }}" class="cart-image">
<img src="{{ item | img_url: 'small' }}" alt="{{ item.title | escape }}">
</a>
</div>
<div class="cart-product-text ">
<a href="{{ item.url }}" class="cart-product-title">
{{ item.product.title }}
</a>
<span class="cart-product-option">{% if item.variant.title contains "Default" %} {% else %} {{ item.variant.title }} {% endif %}</span>

<div class="hidden-sm hidden-md hidden-lg">
<div class="cart-price"><span class="money">{{ item.line_price | money }}</span></div>
</div>
</div>
</div>
<div class="cart-price col-sm-2 hidden-xs">
<span class="money">{{ item.price | money }}</span>
</div>
<div class="col-sm-2 quantity-wrap">
<div class="input-group quantity-group">
<span class="input-group-btn">
<button class="btn btn-minus" type="button">-</button>
</span>

<input type="text" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" class="form-control quantity-selector quantity-box">

<span class="input-group-btn">
<button class="btn btn-plus" type="button">+</button>
</span>
</div><!-- /input-group -->

<input type="submit" name="update" class="btn btn-default btn-update-cart" value="{{ 'cart.general.update' | t }}"/>
</div>
<div class="cart-price col-sm-2 hidden-xs">
<span class="money">{{ item.line_price | money }}</span>
</div>

<a href="/cart/change/{{ item.variant.id }}?quantity=0" class="cart-remove-item"><i class="fa fa-trash-o"></i></a>
</div>
</div>
<hr>
{% endfor %}

<div class="row" >
<div class="col-sm-8">
<div class="payment-methods-wrap">
{% if settings.payment_master == true %}
<i class="fa fa-cc-mastercard"></i>
{% endif %}

{% if settings.payment_visa == true %}
<i class="fa fa-cc-visa"></i>
{% endif %}

{% if settings.payment_amex == true %}
<i class="fa fa-cc-amex"></i>
{% endif %}

{% if settings.payment_discover == true %}
<i class="fa fa-cc-discover"></i>
{% endif %}

{% if settings.payment_paypal == true %}
<i class="fa fa-cc-paypal"></i>
{% endif %}

{% if settings.payment_bitcoin == true %}
<img src="{{ 'payment_method_bitcoin.svg' | asset_url }}" />
{% endif %}
</div>
</div>
<div class="col-sm-4 text-right">
{% comment %}
Optional, add a textarea for special notes
- Your theme settings can turn this on or off. Default is on.
- Make sure you have name="note" for the message to be submitted properly
{% endcomment %}
{% if settings.cart_notes_enable %}
<div class="grid__item large--one-half">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</div>
{% endif %}
<p>
<span class="subtotal-title">{{ 'cart.general.subtotal' | t }}: </span>
<span class="cart-subtotal money">{{ cart.total_price | money }}</span>
</p>
<p class="shipping-info"><em>{{ 'cart.general.shipping_at_checkout' | t }}</em></p>

<input type="submit" name="checkout" class="btn btn-default btn-large btn-checkout" value="{{ 'cart.general.checkout' | t }}">

{% if additional_checkout_buttons %}
<div>{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
</div>

</form>

{% else %}
{% comment %}
The cart is empty
{% endcomment %}
<h2>{{ 'cart.general.title' | t }}</h2>
<p>{{ 'cart.general.empty' | t }}</p>
<p>{{ 'cart.general.continue_browsing_html' | t }}</p>
{% endif %}

</div>
</div>
</div>

0 Likes
Shopify Partner
236 59 70

Hello @Ricardo_Sala and @PureSeoul! I would certainly enjoy helping you show the 'sale price' discount on your cart page.

 

I have implemented this for OliverD who is using the Debut theme. However, you are using a third-party theme that I am not familiar with. There will be a small charge for me to implement this. I will handle everything for you including directly updating your store's theme using collaborator access.

 

Let me know if you are interested! I will send you a private message with my contact details shortly.

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

0 Likes
Excursionist
21 0 4
@BrianAtWork
Hi Brian, thanks for offering to help. Yes, I am interested and have replied to your private message. Thanks!
1 Like
Excursionist
21 0 4

@BrianAtWork 
Thanks for helping me on this, works just how I wanted. 

1 Like
New Member
1 0 0

Hi Brian,

 

I really want to make this change yo make for https://derrins.com/cart to my website also.

I tried to find so long for this solution

 

Please let me know what should I do or how can you make it for me

rowleys-shop.com my email is rowleys.shop@gmail.com

 

Thank you so much!!

0 Likes
Highlighted
New Member
2 0 0

Hi Brian, what about Brooklyn theme? I've managed to get some of it working but when more than one product is in the cart with more than 1 quantity it doesn't work.

 

See images:


correct.jpgCorrect with 1 productincorrect.jpgIncorrect with more than one product

 

As you can see, the first image is correct with £10 savings (£5 each product) but the second does not add in the savings from another item in the cart.

The code I am using is this:
{% assign savings = 0 %}
{% for item in cart.items %}
{% if item.variant.compare_at_price > item.variant.price %}
{% assign difference = item.variant.compare_at_price | minus: item.variant.price %}
{% assign diffSaving = difference | times: item.quantity %}
{% assign savings = savings | plus: diffSaving %}
{% endif %}
{% endfor %}

YOU SAVE {{ diffSaving | money }}

Please help, I've spent several hours mixing code and finding snippets online and trying to see more variables to try etc. Help is very much appreciated!
Thanks

0 Likes
New Member
2 0 0

Hi, That looks really great. I want that also, Can you guys help me out? It would be great if you can explain me how i can add it :D

0 Likes
New Member
2 0 0

Hi, i also have brooklyn, how did you add this code? i want it also :D

0 Likes