Why isn't the discounted price showing in my cart on Ella theme?

Audrey6
New Member
4 0 0

Hi there

I have a shopify store. Theme is Ella

I created an automatic 8% discount for all products 

I tested the sale by adding a product to the cart and the discount works. When I go to my cart, the product shows the original price. And the subtotal is discount price. 

What I want is : 

1. the product shows a discount price

2. The subtotal and total shows discount price and original price at the same time

so customer can know how many they save

Any help would be appreciated . It's obvious the discount has been applied from the "You Saved" line, it's just the prices don't show it.

Below is a screenshot, as you can see original price is$15.99, and discount price is $14.71

cart.png

Replies 7 (7)

PMike
Shopify Partner
134 12 20

To display the discounted price for individual products and show both the discounted price and the original price in the subtotal and total on the cart page in the Ella theme, you'll need to make some adjustments to your theme code. Here's a step-by-step guide on how to achieve this:

1. From your Shopify admin, go to "Online Store" and select "Themes."
2. Locate your Ella theme and click on "Actions" > "Edit code."
3. In the left-hand sidebar, under "Snippets," open the "cart-item.liquid" file.
4. Look for the section of code responsible for displaying the product price. It may look similar to the following:

```liquid
<span class="cart__price">
{{ item.original_price | money }}
</span>
```

5. Replace the above code with the following code to display the discounted price as well:

```liquid
<span class="cart__price">
{{ item.final_line_price | money }}
<del>{{ item.original_price | money }}</del>
</span>
```

6. Save the changes to the file.
7. In the same "Snippets" section, open the "cart-totals.liquid" file.
8. Find the code that displays the subtotal and total prices. It might look similar to this:

```liquid
<span class="cart-subtotal__price">
{{ cart.total_price | money }}
</span>
```

9. Replace the above code with the following code to show both the discounted price and the original price:

```liquid
<span class="cart-subtotal__price">
{{ cart.final_price | money }}
<del>{{ cart.original_price | money }}</del>
</span>
```

10. Save the changes to the file.
11. Preview your store and add a product to the cart to see the updated prices displaying both the discounted price and the original price.
12. If you're satisfied with the changes, click on "Actions" > "Publish" to make the modifications live on your store.

By following these steps, the individual product prices will show the discounted price with the original price struck through. Additionally, the subtotal and total prices on the cart page will display both the discounted price and the original price, allowing customers to see how much they are saving.

Please note that modifying your theme code requires basic knowledge of liquid syntax. Make sure to backup your theme before making any changes and test the modifications thoroughly to ensure they work as expected.

Fordeer Invoice Order Printer - The great tool for the best business!
https://link.fordeer.io/YZL4Ge
Audrey6
New Member
4 0 0

Hi thank you very much

my theme Snippets  doesn't include "cart-totals.liquid" file.

And I thought the code you mention is in sections: main-cart.liquid

This is the code of the file, I have replaced the code, but it not work

This is the original code of the "main-cart.liquid "file

<link rel="stylesheet" href="{{ 'component-cart.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-cart-summary.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-cart.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-cart-summary.css' | asset_url | stylesheet_tag }}</noscript>

{%- liquid
    assign padding_top = section.settings.mg_top_desktop | append: 'px'
    assign padding_bottom = section.settings.mg_bottom_desktop | append: 'px'
    assign padding_top_tablet = section.settings.mg_top_tablet | append: 'px'
    assign padding_bottom_tablet = section.settings.mg_bottom_tablet | append: 'px'
    assign padding_top_mobile = section.settings.mg_top_mobile | append: 'px'
    assign padding_bottom_mobile = section.settings.mg_bottom_mobile | append: 'px'
    assign show_breadcrumb = section.settings.show_breadcrumb
    assign breadcrumb_alignment = section.settings.breadcrumb_alignment
    assign show_page_title = section.settings.show_page_title
    assign page_title_alignment = section.settings.page_title_alignment
    assign container = section.settings.container
    assign side_padding_full_width = section.settings.side_padding_full_width | append: 'px'
    assign show_cart_countdown = section.settings.show_cart_countdown
    assign media_size = section.settings.image_ratio
    assign portrait_aspect_ratio = section.settings.portrait_aspect_ratio | append: '%'
    assign show_shipping_rate_calculator = settings.show_cart_shipping
    assign default_country = settings.shipping_rate_calculator_default_country
    assign show_coupon_code = settings.show_cart_discount
    assign show_cart_note = settings.show_cart_note
    assign show_gift_card = settings.show_cart_gift
    assign continue_button_action = section.settings.continue_button_action
    assign custom_button_link = section.settings.custom_button_link
    assign show_trust_image = section.settings.show_trust_image

    if show_cart_countdown
        assign cart_countdown_time = section.settings.cart_countdown_time
    endif
    if show_gift_card
        assign gift_card_product = settings.cart_product_gift
        assign gift_card_content = settings.main_cart_gift_content
        assign product = all_products[gift_card_product]
        assign id = product.selected_or_first_available_variant.id | minus: 0
        
        assign check = false
        for item in cart.items
        if item.id == id
            assign check = true
        endif
        endfor
    endif
-%}

<cart-items data-section-id="{{ section.id }}" data-section-type="cart" id="CartSection-{{ section.id }}" data-section="{{ section.id }}">
    <div class="cart-container  {% if container == '1170' %}container-1170{% elsif container == '1770' %}container-1770{% elsif container == 'fullwidth'%}container-full{% else %}container{% endif %}">
        {%- if show_breadcrumb -%}
            {% render 'breadcrumb', alignment: breadcrumb_alignment %}
        {%- endif -%}
        {%- if show_page_title -%}
            <h1 class="page-header text-{{ page_title_alignment }}">
                {{ 'sections.cart.title' | t }}
            </h1>
        {%- endif -%}
        {%- if settings.show_calculator_free_shipping_message -%}
            {{ 'component-calculator-shipping.css' | asset_url | stylesheet_tag }}
            <div class="cart-message">
                <div class="haloCalculatorShipping">
                    <div class="progress{% if cart.item_count == 0 %} progress-hidden{% endif %}" data-text-enabled="{{ settings.calculator_free_shipping_message_show_percent  }}" data-shipping-progress>
                      <div class="progress_shipping" role="progressbar">
                            <div class="progress-meter" style="width: 0">
                            {% if settings.calculator_free_shipping_message_show_percent %}
                              <span class="text">0%</span>
                            {% endif %}
                            {% if settings.calculator_free_shipping_message_show_truck %}
                              <div class="progress-truck-wrapper">
                                {% render 'icon-shipping-truck' %}
                              </div>
                            {% endif %}
                          </div>
                        </div>
                    </div>
                    <div class="message" data-shipping-message=""></div>
                </div>
            </div>
        {%- endif -%}
        
        {%- liquid
            assign cartDiscounts = 'template ' | split: ' '
            if cart.cart_level_discount_applications.size > 0
                assign cartDiscounts = cart.cart_level_discount_applications
            endif
        -%}
        <div {% if cart.cart_level_discount_applications.size == 0 %} style="display: none"{% endif %} data-cart-discount-wrapper>
            <div class="order-discount-card-wrapper" data-cart-discount>
                {%- for discount_application in cartDiscounts limit: 1 -%}
                    <span class="order-discount order-discount--title order-discount--cart">
                        <span data-cart-discount-title>{{- discount_application.title -}}</span>
                    </span>
                    <span class="order-discount order-discount--cart order-discount--cart-total">
                      -<span data-cart-discount-amount>{{ discount_application.total_allocated_amount | money }}</span>
                    </span>
                {%- endfor -%}
            </div>
        </div>
        {%- if show_cart_countdown -%}
            <div class="cart-countdown alertBox alertBox--info" data-cart-countdown="{{ cart_countdown_time }}" id="CartCountdown-{{ section.id }}">
                {% render 'icon-important-note' %}
                <span class="text alertBox-message">
                    {{ 'general.cart.cart_countdown' | t }} <span class="time"></span> {{ 'general.cart.cart_countdown_minutes' | t }}
                </span>
            </div>
        {%- endif -%}
        <div class="halo-page-content halo-cart-content" data-cart id="main-cart-items" data-id="{{ section.id }}">
            {%- if cart.item_count > 0 -%}
                <div class="cart-content-wrapper clearfix">
                    <div class="cart-content-item" data-cart-content>
                        <div class="cart">
                            <div class="cart-header">
                                <div class="cart-header-item cart-header-info">{{ 'sections.cart.headings.product' | t }}</div>
                                <div class="cart-header-item cart-header-price">{{ 'sections.cart.headings.price' | t }}</div>
                                <div class="cart-header-item cart-header-quantity">{{ 'sections.cart.headings.quantity' | t }}</div>
                                <div class="cart-header-item cart-header-total">{{ 'sections.cart.headings.total' | t }}</div>
                                <div class="cart-header-item cart-header-remove"></div>
                            </div>
                            <div class="cart-list">
                                {%- for item in cart.items -%}
                                    <div class="cart-item" data-item-row {% if item.product.variants.size != 0 %}{% unless item.variant.title contains 'Default' %}data-cart-edit-productItem{% endunless %}{% endif %} data-line="{{ item.key }}">
                                        <div class="cart-item-block cart-item-info">
                                            <div class="cart-item-wrapper">
                                                <div class="cart-item-block-left">
                                                    <a class="cart-item-image image-{{ media_size }}" href="{{ item.url }}"
                                                        {% if media_size == 'adapt' %}
                                                            style="padding-bottom: {{ 1 | divided_by: item.image.aspect_ratio | times: 100 }}%;"
                                                        {% elsif media_size == 'square' %}
                                                            style="padding-bottom: 100%;"
                                                        {% elsif media_size == 'portrait' %}
                                                            {% if portrait_aspect_ratio != blank %}
                                                                style="padding-bottom: {{ portrait_aspect_ratio }};"
                                                            {% endif %}
                                                        {% elsif media_size == 'circle'%}
                                                            style="padding-bottom: 100%;"
                                                        {% endif %}
                                                    >
                                                        {% render 'icon-external-link' %}
                                                        <img srcset="{{ item.image | img_url: '160x' }}" src="{{ item.image | img_url: '160x' }}" alt="{{ item.title | escape }}" sizes="auto" loading="lazy" width="{{ item.image.width }}" height="{{ item.image.height }}">
                                                    </a>
                                                </div>
                                                <div class="cart-item-block-right">
                                                    {%- liquid
                                                        assign thisHandle = item.product.handle
                                                        assign thisProduct = all_products[thisHandle]
                                                      -%}
                                                      <script type="text/javascript">
                                                        window.cart_selling_array_{{ thisProduct.id }} = {
                                                            {% for variantProduct in thisProduct.variants %}
                                                                '{{ variantProduct.id }}': '{{ variantProduct.inventory_policy }}',
                                                            {%endfor%}
                                                        };
                                                      </script>
                                                    <h4 class="cart-item-name">
                                                        <a href="{{ item.url }}" class="link link-underline">
                                                            <span class="text">{{ item.product.title | escape }}</span>
                                                        </a>
                                                    </h4>
                                                    {%- if item.product.variants.size != 0 -%}
                                                        {%- unless item.variant.title contains 'Default' -%}
                                                            <div class="cart-item-option">
                                                                <span class="cart-item-variant">{{ item.variant.title }}</span>
                                                                <a href="javascript&colon;void(0);" class="cart-item-edit" data-open-edit-cart data-edit-cart-url="{{ item.url }}&view=ajax_edit_cart" data-edit-cart-id="{{ item.id }}" data-edit-cart-quantity="{{ item.quantity }}" data-line="{{ item.key }}" aria-label="{{ 'sections.cart.edit_title' | t: title: item.variant.title }}">
                                                                    {% render 'icon-edit' %}
                                                                </a>
                                                            </div>
                                                        {%- endunless -%}
                                                    {%- endif -%}
                                                    {%- if section.settings.show_vendor -%}
                                                        <p class="cart-item-vendor">{{ item.product.vendor }}</p>
                                                    {%- endif -%}
                                                    {%- if item.properties.size != 0 -%}
                                                        <dl class="cart-item-properties definitionList">
                                                            {%- for property in item.properties -%}
                                                                {%- assign property_first_char = property.first | slice: 0 -%}
                                                                {%- if property.last != blank and property_first_char != '_' -%}
                                                                    <div class="product-option">
                                                                        <dt class="definitionList-key">{{ property.first }}:</dt>
                                                                        <dd class="definitionList-value">
                                                                            {%- if property.last contains '/uploads/' -%}
                                                                                <a href="{{ property.last }}" target="_blank">
                                                                                    {{ property.last | split: '/' | last }}
                                                                                </a>
                                                                            {%- else -%}
                                                                                {{ property.last }}
                                                                            {%- endif -%}
                                                                        </dd>
                                                                    </div>
                                                                {%- endif -%}
                                                            {%- endfor -%}
                                                        </dl>
                                                    {%- endif -%}
                                                    {%- if item.selling_plan_allocation != nil -%}
                                                        <p class="cart-item-allocation">{{ item.selling_plan_allocation.selling_plan.name }}</p>
                                                    {%- endif -%}
                                                    {%- if item.discounts.size > 0 -%}
                                                        <ul class="cart-discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
                                                            {%- for discount in item.discounts -%}
                                                                <li class="discounts__discount">
                                                                    {%- render 'icon-discount' -%}
                                                                    {{ discount.title }}
                                                                </li>
                                                            {%- endfor -%}
                                                        </ul>
                                                    {%- endif -%}
                                                    {% comment %} adding-block {% endcomment %}
                                                    <div class="cart-item-block cart-item-price small-screen-visible">
                                                        <div class="cart-item__price-wrapper">
                                                            {%- if item.original_price != item.final_price -%}
                                                                <dl class="cart-item__discounted-prices">
                                                                    <dt class="visually-hidden">
                                                                        {{ 'products.product.price.regular_price' | t }}
                                                                    </dt>
                                                                    <dd>
                                                                        <s class="cart-item__old-price price price--end">
                                                                            {{ item.original_price | money }}
                                                                        </s>
                                                                    </dd>
                                                                    <dt class="visually-hidden">
                                                                        {{ 'products.product.price.sale_price' | t }}
                                                                    </dt>
                                                                    <dd class="price price--end">
                                                                        {{ item.final_price | money }}
                                                                    </dd>
                                                                </dl>
                                                                {%- if item.variant.available and item.unit_price_measurement -%}
                                                                    <div class="unit-price caption">
                                                                        <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                                                                        {{ item.variant.unit_price | money }}
                                                                        <span aria-hidden="true">/</span>
                                                                        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
                                                                        {%- if item.variant.unit_price_measurement.reference_value != 1 -%}
                                                                            {{- item.variant.unit_price_measurement.reference_value -}}
                                                                        {%- endif -%}
                                                                        {{ item.variant.unit_price_measurement.reference_unit }}
                                                                    </div>
                                                                {%- endif -%}
                                                            {%- else -%}
                                                                <span class="price price--end">
                                                                    {{ item.original_price | money }}
                                                                </span>
                                                            {%- endif -%}
                                                        </div>
                                                    </div>
                                                    <div class="cart-item-blocks small-screen-visible">
                                                        <div class="cart-item-blocks-left">
                                                            <div class="cart-item-block cart-item-quantity small-screen-visible">
                                                                <cart-update-quantity class="cart-item-qty">
                                                                    <label class="form-label hiddenLabels" for="upsell-update-{{ item.id }}">
                                                                        {{ 'products.product.quantity.label' | t }}
                                                                    </label>
                                                                    <a href="javascript&colon;void(0)" data-minus-quantity-cart="" class="minus btn-quantity"></a>
                                                                    <input class="form-input quantity cart-item-qty-input" name="quantity" id="upsell-update-{{ item.id }}" data-qtt-id1="quantity{{ item.id }}" value="{{ item.quantity }}" type="number"{% if item.variant.inventory_management != null and item.variant.inventory_quantity > 0 %} data-inventory-quantity="{{ item.variant.inventory_quantity }}"{% endif %} data-cart-quantity data-cart-quantity-id="{{ item.id }}" data-line="{{ item.key }}" />
                                                                    <a href="javascript&colon;void(0)" data-plus-quantity-cart="" class="plus btn-quantity"></a>
                                                                </cart-update-quantity>
                                                            </div>
                                                        </div>
                                                        <div class="cart-item-block cart-item-remove small-screen-visible">
                                                            <a class="cart-remove" href="javascript&colon;void(0)" data-cart-remove data-cart-remove-id="{{ item.id }}" data-line="{{ item.key }}" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
                                                                {% render 'icon-close' %}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="cart-item-block cart-item-price">
                                            <div class="cart-item__price-wrapper">
                                                {%- if item.original_price != item.final_price -%}
                                                    <dl class="cart-item__discounted-prices">
                                                        <dt class="visually-hidden">
                                                            {{ 'products.product.price.regular_price' | t }}
                                                        </dt>
                                                        <dd>
                                                            <s class="cart-item__old-price price price--end">
                                                                {{ item.original_price | money }}
                                                            </s>
                                                        </dd>
                                                        <dt class="visually-hidden">
                                                            {{ 'products.product.price.sale_price' | t }}
                                                        </dt>
                                                        <dd class="price price--end">
                                                            {{ item.final_price | money }}
                                                        </dd>
                                                    </dl>
                                                    {%- if item.variant.available and item.unit_price_measurement -%}
                                                        <div class="unit-price caption">
                                                            <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                                                            {{ item.variant.unit_price | money }}
                                                            <span aria-hidden="true">/</span>
                                                            <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
                                                            {%- if item.variant.unit_price_measurement.reference_value != 1 -%}
                                                                {{- item.variant.unit_price_measurement.reference_value -}}
                                                            {%- endif -%}
                                                            {{ item.variant.unit_price_measurement.reference_unit }}
                                                        </div>
                                                    {%- endif -%}
                                                {%- else -%}
                                                    <span class="price price--end">
                                                        {{ item.original_price | money }}
                                                    </span>
                                                {%- endif -%}
                                            </div>
                                        </div>
                                        <div class="cart-item-block cart-item-quantity">
                                            <cart-update-quantity class="cart-item-qty" data-product="{{ item.product_id }}" data-variant="{{ item.variant.id }}">
                                                <label class="form-label hiddenLabels" for="upsell-update-{{ item.id }}">
                                                    {{ 'products.product.quantity.label' | t }}
                                                </label>
                                                <a href="javascript&colon;void(0)" data-minus-quantity-cart="" class="minus btn-quantity"></a>
                                                <input class="form-input quantity cart-item-qty-input" name="quantity" id="upsell-update-{{ item.id }}" data-qtt-id1="quantity{{ item.id }}" value="{{ item.quantity }}" type="number"{% if item.variant.inventory_management != null and item.variant.inventory_quantity > 0 %} data-inventory-quantity="{{ item.variant.inventory_quantity }}"{% endif %} data-cart-quantity data-cart-quantity-id="{{ item.id }}" data-line="{{ item.key }}" />
                                                <a href="javascript&colon;void(0)" data-plus-quantity-cart="" class="plus btn-quantity"></a>
                                            </cart-update-quantity>
                                        </div>
                                        <div class="cart-item-block cart-item-total" data-price="{{ item.original_price }}">
                                            <span class="cart-item-value">{{ item.original_price | times: item.quantity | money }}</span>
                                        </div>
                                        <div class="cart-item-block cart-item-remove">
                                            <a class="cart-remove" href="javascript&colon;void(0)" data-cart-remove data-cart-remove-id="{{ item.id }}" data-line="{{ item.key }}" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
                                                {% render 'icon-close' %}
                                            </a>
                                        </div>
                                    </div>
                                {%- endfor -%}
                            </div>
                        </div>
                        {% if show_gift_card %}
                            <div id="is-a-gift" class="gift-card-container" data-id="{{ id }}" style="display: none;">
                                {% render 'icon-cart-gift' %}
                                <div class="content-gift text-left">
                                    {{ gift_card_content }}
                                </div>
                                <a class="button button-2" id="cart-gift-wrapping" data-is-checked='{{ check }}' href="javascript&colon;void(0)" data-gift-id="{{ product.selected_or_first_available_variant.id }}" data-gift-price="{{ product.selected_or_first_available_variant.price }}" data-add-text="{{ 'general.cart.gift_cart_add' | t }}" data-adding-text="{{ 'general.cart.gift_cart_adding' | t }}">
                                    {{ 'general.cart.gift_cart_add' | t }}
                                </a>
                                <input type="hidden" value="yes" />
                            </div>
                        {%- endif -%}
                        {%- if show_cart_note -%}
                            <div class="cart-note form-field">
                                <label class="form-label" for="cart-note">{{ 'general.cart.note' | t }}</label>
                                <textarea class="form-input form-input-placeholder" name="note" id="cart-note" placeholder="{{ 'general.cart.note_placeholder' | t }}">{{ cart.note }}</textarea>
                                <a class="button button-1" style="display: none" data-update-note>{{ 'general.cart.save' | t }}</a>
                            </div>
                        {%- endif -%}
                        {%- if show_trust_image -%}
                            <div class="cart-securityImage">
                                <span class="cart-securityImage-label">
                                    {%- render 'icon-shield-check' -%}
                                    {{ 'general.cart.secure_text' | t }}
                                </span>
                                {%- render 'halo-trust-image',
                                    type: 'cart'
                                -%}
                            </div>
                        {%- endif -%}
                    </div>
                    <div class="cart-content-item cart-total" data-cart-total>
                        <form action="{{ routes.cart_url }}" method="post" novalidate>
                            <ul class="cart-totals list-unstyled">
                                <div class="cart--totals-title">
                                    {{ 'general.cart.order_summary' | t }} 
                                </div>
                                <li class="cart-total cart-total-subtotal">
                                    <div class="cart-total-label">
                                        <span class="text">{{ 'general.cart.subtotal' | t }}</span>
                                    </div>
                                    <div class="cart-total-value">
                                        <span class="text">{{ cart.total_price | money }}</span>
                                    </div>
                                </li>
                                {%- if show_shipping_rate_calculator -%}
                                    <li class="cart-total cart-total-shipping">
                                        <div class="cart-total-label">
                                            <span class="text">{{ 'general.cart.shipping' | t }}</span>
                                        </div>
                                        <div class="cart-total-value" style="display: none;"></div>
                                        {% render 'shipping-rates-calculator' %}
                                    </li>
                                {%- endif -%}
                                {%- if show_coupon_code -%}
                                    <li class="cart-total cart-total-coupon">
                                        <div class="cart-total-label">
                                            <span class="text">{{ 'general.cart.coupon_code' | t }}</span>
                                        </div>
                                        <div class="cart-total-value" style="display: none;"></div>
                                        <div class="cart-coupon-code form-field discount-code-field"> 
                                            <label class="form-label hiddenLabels" for="cart-coupon-code">{{ 'general.cart.coupon_code' | t }}</label> 
                                            <input class="form-input" autocomplete="off" type="text" name="discount" id="cart-coupon-code" placeholder="{{'general.cart.enter_coupo_code' | t }}" /> 
                                            <p class="form-text">{{ 'general.cart.coupon_code_text' | t }}</p>
                                        </div>
                                    </li>
                                {%- endif -%}
                                <li class="cart-total cart-total-grandtotal">
                                    <div class="cart-total-label">
                                        <span class="text">{{ 'general.cart.total' | t }}</span>
                                    </div>
                                    <div class="cart-total-value">
                                        <span class="text">{{ cart.total_price | money }}</span>
                                    </div>
                                </li>
                            </ul>
                            <div class="cart-actions">
                                {%- if settings.show_global_checkbox -%}
                                    <div class="cart-checkbox global-checkbox">
                                        <input class="global-checkbox--input" type="checkbox" name="conditions" id="cart_conditions" data-target="#cart-checkout">
                                        <label class="global-checkbox--label form-label--checkbox" for="cart_conditions">
                                            {{ settings.global_checkbox_text }}
                                        </label>
                                        {%- if settings.global_checkbox_link_text != blank -%}
                                            <a href="javascript&colon;void(0)" data-term-condition>
                                                {{ settings.global_checkbox_link_text | escape }}
                                            </a>
                                        {%- endif -%}
                                    </div>
                                {%- endif -%}
                                <div class="action-group">
                                    <button class="button button-1 button-checkout" {% if settings.show_global_checkbox %} disabled="disabled" {% endif %} id="cart-checkout">
                                        {{ 'sections.cart.proceed_to_checkout' | t }}
                                    </button>
                                    {% if continue_button_action == "1" %}
                                        <a class="button button-2 button-continue" href="{{ custom_button_link }}" role="button">
                                            {{ 'general.continue_shopping' | t }}
                                        </a>
                                    {% else %}
                                        <a class="button button-2 button-continue" href="javascript&colon;void(0)" onclick="window.history.back();" role="button" id="cart-previous-page-btn">
                                            {{ 'general.back_to_previous_page' | t }}
                                        </a>
                                    {% endif %}
                                </div> 
                            </div>
                        </form>
                    </div>
                </div>
            {%- else -%}
                <div class="cart-content-empty text-center">
                    <span class="cart-text">{{ 'sections.cart.empty' | t }}</span>
                    <div class="cart-actions">
                        {% if continue_button_action == "1" %}
                            <a class="button button-2 button-continue" href="{{ custom_button_link }}" role="button">
                                {{ 'general.continue_shopping' | t }}
                            </a>
                        {% else %}
                            <a class="button button-2 button-continue" href="javascript&colon;void(0)" onclick="window.history.back();" role="button" id="cart-previous-page-btn">
                                {{ 'general.back_to_previous_page' | t }}
                            </a>
                        {% endif %}
                    </div>
                </div>
            {%- endif -%}
        </div>
        <p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
        <p class="visually-hidden" id="shopping-cart-line-item-status" aria-live="polite" aria-hidden="true" role="status">{{ 'accessibility.loading' | t }}</p>
    </div>
</cart-items>

<style type="text/css" media="screen">
    #CartSection-{{ section.id }} .cart-container {
        padding-top: {{ padding_top }};
        padding-bottom: {{ padding_bottom }};
    }

    #CartSection-{{ section.id }} .cart-container.container-full {
        padding-left: {{ side_padding_full_width }};
        padding-right: {{ side_padding_full_width }};
    }

    @media (max-width: 1024px) {
        #CartSection-{{ section.id }} .cart-container {
            padding-top: {{ padding_top_tablet }};
            padding-bottom: {{ padding_bottom_tablet }};
        }
    }

    @media (max-width: 550px) {
        #CartSection-{{ section.id }} .cart-container {
            padding-top: {{ padding_top_mobile }};
            padding-bottom: {{ padding_bottom_mobile }};
        }
    }
</style>

<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>

{% schema %}
{
    "name": "t:sections.main_cart.name",
    "settings": 
        [
            {
                "type": "header",
                "content": "t:sections.main_lookbook_page.settings.header__1"
            },
            {
                "type": "checkbox",
                "id": "show_breadcrumb",
                "label": "t:sections.general.settings.breadcrumb.label__1",
                "default": false
            },
            {
                "type": "color",
                "id": "breadcrumb_color",
                "label": "t:sections.general.settings.breadcrumb.breadcrumb_color"
            },
            {
                "type": "select",
                "id": "breadcrumb_alignment",
                "label": "t:sections.general.settings.breadcrumb.label__2",
                "options": [
                    {
                        "value": "left",
                        "label": "t:sections.general.settings.breadcrumb.options__1"
                    },
                    {
                        "value": "center",
                        "label": "t:sections.general.settings.breadcrumb.options__2"
                    },
                    {
                        "value": "right",
                        "label": "t:sections.general.settings.breadcrumb.options__3"
                    }
                ],
                "default": "center"
            },
            {
                "type": "checkbox",
                "id": "show_page_title",
                "label": "t:sections.general.settings.page-title.label__1",
                "default": false
            },
            {
                "type": "color",
                "id": "page_title_color",
                "label": "t:settings_schema.typography.settings.typography.text_color"
            },
            {
                "type": "select",
                "id": "page_title_alignment",
                "label": "t:sections.general.settings.page-title.label__2",
                "options": [
                    {
                        "value": "left",
                        "label": "t:sections.general.settings.page-title.options__1"
                    },
                    {
                        "value": "center",
                        "label": "t:sections.general.settings.page-title.options__2"
                    },
                    {
                        "value": "right",
                        "label": "t:sections.general.settings.page-title.options__3"
                    }
                ],
                "default": "center"
            }, 
            {
                "type": "select",
                "id": "container",
                "label": "t:sections.layout.container.option",
                "default": "container",
                "options": [
                    {
                        "value": "container",
                        "label": "t:sections.layout.container.option1"
                    },
                    {
                        "value": "1170",
                        "label": "t:sections.layout.container.option4"
                    },
                    {
                        "value": "fullwidth",
                        "label": "t:sections.layout.container.option2"
                    },
                    {
                        "value": "1770",
                        "label": "t:sections.layout.container.option3"
                    }
                ]
            },
            {
                "type": "range",
                "id": "side_padding_full_width",
                "label": "t:sections.general.settings.container.padding_full",
                "info": "t:sections.general.settings.container.padding_full_info",
                "min": 0,
                "max": 100,
                "step": 1,
                "default": 0,
                "unit": "t:sections.general.settings.padding.unit"
            },
            {
                "type": "header",
                "content": "t:sections.layout.margin_top"
            },
            {
                "type": "range",
                "id": "mg_top_desktop",
                "label": "t:sections.layout.mg_desktop.label",
                "min": 0,
                "max": 100,
                "step": 5,
                "unit": "t:sections.layout.mg_desktop.unit",
                "default": 50
            },
            {
                "type": "range",
                "id": "mg_top_tablet",
                "label": "t:sections.layout.mg_tablet.label",
                "min": 0,
                "max": 100,
                "step": 5,
                "unit": "t:sections.layout.mg_desktop.unit",
                "default": 50
            },
            {
                "type": "range",
                "id": "mg_top_mobile",
                "label": "t:sections.layout.mg_mobile.label",
                "min": 0,
                "max": 100,
                "step": 5,
                "unit": "t:sections.layout.mg_desktop.unit",
                "default": 50
            },
            {
                "type": "header",
                "content": "t:sections.layout.margin_bottom"
            },
            {
                "type": "range",
                "id": "mg_bottom_desktop",
                "label": "t:sections.layout.mg_desktop.label",
                "min": 0,
                "max": 100,
                "step": 5,
                "unit": "t:sections.layout.mg_desktop.unit",
                "default": 50
            },
            {
                "type": "range",
                "id": "mg_bottom_tablet",
                "label": "t:sections.layout.mg_tablet.label",
                "min": 0,
                "max": 100,
                "step": 5,
                "unit": "t:sections.layout.mg_desktop.unit",
                "default": 50
            },
            {
                "type": "range",
                "id": "mg_bottom_mobile",
                "label": "t:sections.layout.mg_mobile.label",
                "min": 0,
                "max": 100,
                "step": 5,
                "unit": "t:sections.layout.mg_desktop.unit",
                "default": 50
            },
        {
            "type": "header",
            "content": "t:sections.main_cart.settings.header__1"
        },
        {
            "type": "checkbox",
            "id": "show_vendor",
            "label": "t:sections.main-product.settings.info.label__1",
            "default": false
        },
        {
            "type": "select",
            "id": "image_ratio",
            "label": "t:sections.general.settings.image-ratio.label__1",
            "default": "portrait",
            "options": [
                {
                    "value": "adapt",
                    "label": "t:sections.general.settings.image-ratio.options__1"
                },
                {
                    "value": "portrait",
                    "label": "t:sections.general.settings.image-ratio.options__2"
                },
                {
                    "value": "square",
                    "label": "t:sections.general.settings.image-ratio.options__3"
                },
                {
                    "value": "circle",
                    "label": "t:sections.general.settings.image-ratio.options__4"
                }
            ]
        },
        {
            "type": "range",
            "id": "portrait_aspect_ratio",
            "label": "t:sections.general.settings.image-ratio.label__2",
            "min": 101,
            "max": 150,
            "step": 1,
            "unit": "t:sections.general.settings.image-ratio.unit",
            "default": 148,
            "info": "t:sections.general.settings.image-ratio.info"
        },
        {
            "type": "header",
            "content": "t:settings_schema.countdown.name"
        },
        {
            "type": "checkbox",
            "id": "show_cart_countdown",
            "label": "t:settings_schema.countdown.settings.general.label__1",
            "default": true
        },
        {
            "type": "range",
            "id": "cart_countdown_time",
            "label": "t:settings_schema.countdown.settings.general.label__3",
            "default": 30,
            "min": 1,
            "max": 60,
            "step": 1,
            "unit": "t:settings_schema.before_you_leave.settings.general.unit"
        },
        {
            "type": "header",
            "content": "t:sections.main_cart.settings.header__2"
        },
        {
            "type": "checkbox",
            "id": "show_trust_image",
            "label": "t:sections.main_cart.settings.label__1",
            "default": true
        },
        {
            "type": "header",
            "content": "t:sections.main_cart.settings.header__3"
        },
        {
            "type": "select",
            "id": "continue_button_action",
            "label": "t:sections.main_cart.settings.label__2",
            "default": "1",
            "options": [
                {
                    "value": "1",
                    "label": "t:sections.main_cart.settings.option__1"
                },
                {
                    "value": "2",
                    "label": "t:sections.main_cart.settings.option__2"
                }
            ]
        },
        {
            "type": "url",
            "id": "custom_button_link",
            "label": "t:sections.main_cart.settings.label__3",
            "info": "t:sections.main_cart.settings.info"
        }
    ]
}
{% endschema %}

 

Arnau11
Visitor
1 0 0

Which app do you use for free shipping progress bar (haloCalculatorShipping) ?

Audrey6
New Member
4 0 0

Thank you so much

I don't have a "Snippets," -  "cart-item.liquid" file.

I though the code is in the section cart-main.liquid. I replaced all {{ item.original_price | money }} by {{ item.final_line_price | money }}
<del>{{ item.original_price | money }}</del>, but it doesn't work

This is the code of the file

Can you check it for me?

Thanks in advance.

 

 

 

<link rel="stylesheet" href="{{ 'component-cart.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-cart-summary.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-cart.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-cart-summary.css' | asset_url | stylesheet_tag }}</noscript>

{%- liquid
    assign padding_top = section.settings.mg_top_desktop | append: 'px'
    assign padding_bottom = section.settings.mg_bottom_desktop | append: 'px'
    assign padding_top_tablet = section.settings.mg_top_tablet | append: 'px'
    assign padding_bottom_tablet = section.settings.mg_bottom_tablet | append: 'px'
    assign padding_top_mobile = section.settings.mg_top_mobile | append: 'px'
    assign padding_bottom_mobile = section.settings.mg_bottom_mobile | append: 'px'
    assign show_breadcrumb = section.settings.show_breadcrumb
    assign breadcrumb_alignment = section.settings.breadcrumb_alignment
    assign show_page_title = section.settings.show_page_title
    assign page_title_alignment = section.settings.page_title_alignment
    assign container = section.settings.container
    assign side_padding_full_width = section.settings.side_padding_full_width | append: 'px'
    assign show_cart_countdown = section.settings.show_cart_countdown
    assign media_size = section.settings.image_ratio
    assign portrait_aspect_ratio = section.settings.portrait_aspect_ratio | append: '%'
    assign show_shipping_rate_calculator = settings.show_cart_shipping
    assign default_country = settings.shipping_rate_calculator_default_country
    assign show_coupon_code = settings.show_cart_discount
    assign show_cart_note = settings.show_cart_note
    assign show_gift_card = settings.show_cart_gift
    assign continue_button_action = section.settings.continue_button_action
    assign custom_button_link = section.settings.custom_button_link
    assign show_trust_image = section.settings.show_trust_image

    if show_cart_countdown
        assign cart_countdown_time = section.settings.cart_countdown_time
    endif
    if show_gift_card
        assign gift_card_product = settings.cart_product_gift
        assign gift_card_content = settings.main_cart_gift_content
        assign product = all_products[gift_card_product]
        assign id = product.selected_or_first_available_variant.id | minus: 0
        
        assign check = false
        for item in cart.items
        if item.id == id
            assign check = true
        endif
        endfor
    endif
-%}

<cart-items data-section-id="{{ section.id }}" data-section-type="cart" id="CartSection-{{ section.id }}" data-section="{{ section.id }}">
    <div class="cart-container  {% if container == '1170' %}container-1170{% elsif container == '1770' %}container-1770{% elsif container == 'fullwidth'%}container-full{% else %}container{% endif %}">
        {%- if show_breadcrumb -%}
            {% render 'breadcrumb', alignment: breadcrumb_alignment %}
        {%- endif -%}
        {%- if show_page_title -%}
            <h1 class="page-header text-{{ page_title_alignment }}">
                {{ 'sections.cart.title' | t }}
            </h1>
        {%- endif -%}
        {%- if settings.show_calculator_free_shipping_message -%}
            {{ 'component-calculator-shipping.css' | asset_url | stylesheet_tag }}
            <div class="cart-message">
                <div class="haloCalculatorShipping">
                    <div class="progress{% if cart.item_count == 0 %} progress-hidden{% endif %}" data-text-enabled="{{ settings.calculator_free_shipping_message_show_percent  }}" data-shipping-progress>
                      <div class="progress_shipping" role="progressbar">
                            <div class="progress-meter" style="width: 0">
                            {% if settings.calculator_free_shipping_message_show_percent %}
                              <span class="text">0%</span>
                            {% endif %}
                            {% if settings.calculator_free_shipping_message_show_truck %}
                              <div class="progress-truck-wrapper">
                                {% render 'icon-shipping-truck' %}
                              </div>
                            {% endif %}
                          </div>
                        </div>
                    </div>
                    <div class="message" data-shipping-message=""></div>
                </div>
            </div>
        {%- endif -%}
        
        {%- liquid
            assign cartDiscounts = 'template ' | split: ' '
            if cart.cart_level_discount_applications.size > 0
                assign cartDiscounts = cart.cart_level_discount_applications
            endif
        -%}
        <div {% if cart.cart_level_discount_applications.size == 0 %} style="display: none"{% endif %} data-cart-discount-wrapper>
            <div class="order-discount-card-wrapper" data-cart-discount>
                {%- for discount_application in cartDiscounts limit: 1 -%}
                    <span class="order-discount order-discount--title order-discount--cart">
                        <span data-cart-discount-title>{{- discount_application.title -}}</span>
                    </span>
                    <span class="order-discount order-discount--cart order-discount--cart-total">
                      -<span data-cart-discount-amount>{{ discount_application.total_allocated_amount | money }}</span>
                    </span>
                {%- endfor -%}
            </div>
        </div>
        {%- if show_cart_countdown -%}
            <div class="cart-countdown alertBox alertBox--info" data-cart-countdown="{{ cart_countdown_time }}" id="CartCountdown-{{ section.id }}">
                {% render 'icon-important-note' %}
                <span class="text alertBox-message">
                    {{ 'general.cart.cart_countdown' | t }} <span class="time"></span> {{ 'general.cart.cart_countdown_minutes' | t }}
                </span>
            </div>
        {%- endif -%}
        <div class="halo-page-content halo-cart-content" data-cart id="main-cart-items" data-id="{{ section.id }}">
            {%- if cart.item_count > 0 -%}
                <div class="cart-content-wrapper clearfix">
                    <div class="cart-content-item" data-cart-content>
                        <div class="cart">
                            <div class="cart-header">
                                <div class="cart-header-item cart-header-info">{{ 'sections.cart.headings.product' | t }}</div>
                                <div class="cart-header-item cart-header-price">{{ 'sections.cart.headings.price' | t }}</div>
                                <div class="cart-header-item cart-header-quantity">{{ 'sections.cart.headings.quantity' | t }}</div>
                                <div class="cart-header-item cart-header-total">{{ 'sections.cart.headings.total' | t }}</div>
                                <div class="cart-header-item cart-header-remove"></div>
                            </div>
                            <div class="cart-list">
                                {%- for item in cart.items -%}
                                    <div class="cart-item" data-item-row {% if item.product.variants.size != 0 %}{% unless item.variant.title contains 'Default' %}data-cart-edit-productItem{% endunless %}{% endif %} data-line="{{ item.key }}">
                                        <div class="cart-item-block cart-item-info">
                                            <div class="cart-item-wrapper">
                                                <div class="cart-item-block-left">
                                                    <a class="cart-item-image image-{{ media_size }}" href="{{ item.url }}"
                                                        {% if media_size == 'adapt' %}
                                                            style="padding-bottom: {{ 1 | divided_by: item.image.aspect_ratio | times: 100 }}%;"
                                                        {% elsif media_size == 'square' %}
                                                            style="padding-bottom: 100%;"
                                                        {% elsif media_size == 'portrait' %}
                                                            {% if portrait_aspect_ratio != blank %}
                                                                style="padding-bottom: {{ portrait_aspect_ratio }};"
                                                            {% endif %}
                                                        {% elsif media_size == 'circle'%}
                                                            style="padding-bottom: 100%;"
                                                        {% endif %}
                                                    >
                                                        {% render 'icon-external-link' %}
                                                        <img srcset="{{ item.image | img_url: '160x' }}" src="{{ item.image | img_url: '160x' }}" alt="{{ item.title | escape }}" sizes="auto" loading="lazy" width="{{ item.image.width }}" height="{{ item.image.height }}">
                                                    </a>
                                                </div>
                                                <div class="cart-item-block-right">
                                                    {%- liquid
                                                        assign thisHandle = item.product.handle
                                                        assign thisProduct = all_products[thisHandle]
                                                      -%}
                                                      <script type="text/javascript">
                                                        window.cart_selling_array_{{ thisProduct.id }} = {
                                                            {% for variantProduct in thisProduct.variants %}
                                                                '{{ variantProduct.id }}': '{{ variantProduct.inventory_policy }}',
                                                            {%endfor%}
                                                        };
                                                      </script>
                                                    <h4 class="cart-item-name">
                                                        <a href="{{ item.url }}" class="link link-underline">
                                                            <span class="text">{{ item.product.title | escape }}</span>
                                                        </a>
                                                    </h4>
                                                    {%- if item.product.variants.size != 0 -%}
                                                        {%- unless item.variant.title contains 'Default' -%}
                                                            <div class="cart-item-option">
                                                                <span class="cart-item-variant">{{ item.variant.title }}</span>
                                                                <a href="javascript&colon;void(0);" class="cart-item-edit" data-open-edit-cart data-edit-cart-url="{{ item.url }}&view=ajax_edit_cart" data-edit-cart-id="{{ item.id }}" data-edit-cart-quantity="{{ item.quantity }}" data-line="{{ item.key }}" aria-label="{{ 'sections.cart.edit_title' | t: title: item.variant.title }}">
                                                                    {% render 'icon-edit' %}
                                                                </a>
                                                            </div>
                                                        {%- endunless -%}
                                                    {%- endif -%}
                                                    {%- if section.settings.show_vendor -%}
                                                        <p class="cart-item-vendor">{{ item.product.vendor }}</p>
                                                    {%- endif -%}
                                                    {%- if item.properties.size != 0 -%}
                                                        <dl class="cart-item-properties definitionList">
                                                            {%- for property in item.properties -%}
                                                                {%- assign property_first_char = property.first | slice: 0 -%}
                                                                {%- if property.last != blank and property_first_char != '_' -%}
                                                                    <div class="product-option">
                                                                        <dt class="definitionList-key">{{ property.first }}:</dt>
                                                                        <dd class="definitionList-value">
                                                                            {%- if property.last contains '/uploads/' -%}
                                                                                <a href="{{ property.last }}" target="_blank">
                                                                                    {{ property.last | split: '/' | last }}
                                                                                </a>
                                                                            {%- else -%}
                                                                                {{ property.last }}
                                                                            {%- endif -%}
                                                                        </dd>
                                                                    </div>
                                                                {%- endif -%}
                                                            {%- endfor -%}
                                                        </dl>
                                                    {%- endif -%}
                                                    {%- if item.selling_plan_allocation != nil -%}
                                                        <p class="cart-item-allocation">{{ item.selling_plan_allocation.selling_plan.name }}</p>
                                                    {%- endif -%}
                                                    {%- if item.discounts.size > 0 -%}
                                                        <ul class="cart-discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
                                                            {%- for discount in item.discounts -%}
                                                                <li class="discounts__discount">
                                                                    {%- render 'icon-discount' -%}
                                                                    {{ discount.title }}
                                                                </li>
                                                            {%- endfor -%}
                                                        </ul>
                                                    {%- endif -%}
                                                    {% comment %} adding-block {% endcomment %}
                                                    <div class="cart-item-block cart-item-price small-screen-visible">
                                                        <div class="cart-item__price-wrapper">
                                                            {%- if item.original_price != item.final_price -%}
                                                                <dl class="cart-item__discounted-prices">
                                                                    <dt class="visually-hidden">
                                                                        {{ 'products.product.price.regular_price' | t }}
                                                                    </dt>
                                                                    <dd>
                                                                        <s class="cart-item__old-price price price--end">
                                                                            {{ item.original_price | money }}
                                                                        </s>
                                                                    </dd>
                                                                    <dt class="visually-hidden">
                                                                        {{ 'products.product.price.sale_price' | t }}
                                                                    </dt>
                                                                    <dd class="price price--end">
                                                                        {{ item.final_price | money }}
                                                                    </dd>
                                                                </dl>
                                                                {%- if item.variant.available and item.unit_price_measurement -%}
                                                                    <div class="unit-price caption">
                                                                        <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                                                                        {{ item.variant.unit_price | money }}
                                                                        <span aria-hidden="true">/</span>
                                                                        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
                                                                        {%- if item.variant.unit_price_measurement.reference_value != 1 -%}
                                                                            {{- item.variant.unit_price_measurement.reference_value -}}
                                                                        {%- endif -%}
                                                                        {{ item.variant.unit_price_measurement.reference_unit }}
                                                                    </div>
                                                                {%- endif -%}
                                                            {%- else -%}
                                                                <span class="price price--end">
                                                                    {{ item.original_price | money }}
                                                                </span>
                                                            {%- endif -%}
                                                        </div>
                                                    </div>
                                                    <div class="cart-item-blocks small-screen-visible">
                                                        <div class="cart-item-blocks-left">
                                                            <div class="cart-item-block cart-item-quantity small-screen-visible">
                                                                <cart-update-quantity class="cart-item-qty">
                                                                    <label class="form-label hiddenLabels" for="upsell-update-{{ item.id }}">
                                                                        {{ 'products.product.quantity.label' | t }}
                                                                    </label>
                                                                    <a href="javascript&colon;void(0)" data-minus-quantity-cart="" class="minus btn-quantity"></a>
                                                                    <input class="form-input quantity cart-item-qty-input" name="quantity" id="upsell-update-{{ item.id }}" data-qtt-id1="quantity{{ item.id }}" value="{{ item.quantity }}" type="number"{% if item.variant.inventory_management != null and item.variant.inventory_quantity > 0 %} data-inventory-quantity="{{ item.variant.inventory_quantity }}"{% endif %} data-cart-quantity data-cart-quantity-id="{{ item.id }}" data-line="{{ item.key }}" />
                                                                    <a href="javascript&colon;void(0)" data-plus-quantity-cart="" class="plus btn-quantity"></a>
                                                                </cart-update-quantity>
                                                            </div>
                                                        </div>
                                                        <div class="cart-item-block cart-item-remove small-screen-visible">
                                                            <a class="cart-remove" href="javascript&colon;void(0)" data-cart-remove data-cart-remove-id="{{ item.id }}" data-line="{{ item.key }}" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
                                                                {% render 'icon-close' %}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="cart-item-block cart-item-price">
                                            <div class="cart-item__price-wrapper">
                                                {%- if item.original_price != item.final_price -%}
                                                    <dl class="cart-item__discounted-prices">
                                                        <dt class="visually-hidden">
                                                            {{ 'products.product.price.regular_price' | t }}
                                                        </dt>
                                                        <dd>
                                                            <s class="cart-item__old-price price price--end">
                                                                {{ item.original_price | money }}
                                                            </s>
                                                        </dd>
                                                        <dt class="visually-hidden">
                                                            {{ 'products.product.price.sale_price' | t }}
                                                        </dt>
                                                        <dd class="price price--end">
                                                            {{ item.final_price | money }}
                                                        </dd>
                                                    </dl>
                                                    {%- if item.variant.available and item.unit_price_measurement -%}
                                                        <div class="unit-price caption">
                                                            <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                                                            {{ item.variant.unit_price | money }}
                                                            <span aria-hidden="true">/</span>
                                                            <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
                                                            {%- if item.variant.unit_price_measurement.reference_value != 1 -%}
                                                                {{- item.variant.unit_price_measurement.reference_value -}}
                                                            {%- endif -%}
                                                            {{ item.variant.unit_price_measurement.reference_unit }}
                                                        </div>
                                                    {%- endif -%}
                                                {%- else -%}
                                                    <span class="price price--end">
                                                        {{ item.original_price | money }}
                                                    </span>
                                                {%- endif -%}
                                            </div>
                                        </div>
                                        <div class="cart-item-block cart-item-quantity">
                                            <cart-update-quantity class="cart-item-qty" data-product="{{ item.product_id }}" data-variant="{{ item.variant.id }}">
                                                <label class="form-label hiddenLabels" for="upsell-update-{{ item.id }}">
                                                    {{ 'products.product.quantity.label' | t }}
                                                </label>
                                                <a href="javascript&colon;void(0)" data-minus-quantity-cart="" class="minus btn-quantity"></a>
                                                <input class="form-input quantity cart-item-qty-input" name="quantity" id="upsell-update-{{ item.id }}" data-qtt-id1="quantity{{ item.id }}" value="{{ item.quantity }}" type="number"{% if item.variant.inventory_management != null and item.variant.inventory_quantity > 0 %} data-inventory-quantity="{{ item.variant.inventory_quantity }}"{% endif %} data-cart-quantity data-cart-quantity-id="{{ item.id }}" data-line="{{ item.key }}" />
                                                <a href="javascript&colon;void(0)" data-plus-quantity-cart="" class="plus btn-quantity"></a>
                                            </cart-update-quantity>
                                        </div>
                                        <div class="cart-item-block cart-item-total" data-price="{{ item.original_price }}">
                                            <span class="cart-item-value">{{ item.original_price | times: item.quantity | money }}</span>
                                        </div>
                                        <div class="cart-item-block cart-item-remove">
                                            <a class="cart-remove" href="javascript&colon;void(0)" data-cart-remove data-cart-remove-id="{{ item.id }}" data-line="{{ item.key }}" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
                                                {% render 'icon-close' %}
                                            </a>
                                        </div>
                                    </div>
                                {%- endfor -%}
                            </div>
                        </div>
                        {% if show_gift_card %}
                            <div id="is-a-gift" class="gift-card-container" data-id="{{ id }}" style="display: none;">
                                {% render 'icon-cart-gift' %}
                                <div class="content-gift text-left">
                                    {{ gift_card_content }}
                                </div>
                                <a class="button button-2" id="cart-gift-wrapping" data-is-checked='{{ check }}' href="javascript&colon;void(0)" data-gift-id="{{ product.selected_or_first_available_variant.id }}" data-gift-price="{{ product.selected_or_first_available_variant.price }}" data-add-text="{{ 'general.cart.gift_cart_add' | t }}" data-adding-text="{{ 'general.cart.gift_cart_adding' | t }}">
                                    {{ 'general.cart.gift_cart_add' | t }}
                                </a>
                                <input type="hidden" value="yes" />
                            </div>
                        {%- endif -%}
                        {%- if show_cart_note -%}
                            <div class="cart-note form-field">
                                <label class="form-label" for="cart-note">{{ 'general.cart.note' | t }}</label>
                                <textarea class="form-input form-input-placeholder" name="note" id="cart-note" placeholder="{{ 'general.cart.note_placeholder' | t }}">{{ cart.note }}</textarea>
                                <a class="button button-1" style="display: none" data-update-note>{{ 'general.cart.save' | t }}</a>
                            </div>
                        {%- endif -%}
                        {%- if show_trust_image -%}
                            <div class="cart-securityImage">
                                <span class="cart-securityImage-label">
                                    {%- render 'icon-shield-check' -%}
                                    {{ 'general.cart.secure_text' | t }}
                                </span>
                                {%- render 'halo-trust-image',
                                    type: 'cart'
                                -%}
                            </div>
                        {%- endif -%}
                    </div>
                    <div class="cart-content-item cart-total" data-cart-total>
                        <form action="{{ routes.cart_url }}" method="post" novalidate>
                            <ul class="cart-totals list-unstyled">
                                <div class="cart--totals-title">
                                    {{ 'general.cart.order_summary' | t }} 
                                </div>
                                <li class="cart-total cart-total-subtotal">
                                    <div class="cart-total-label">
                                        <span class="text">{{ 'general.cart.subtotal' | t }}</span>
                                    </div>
                                    <div class="cart-total-value">
                                        <span class="text">{{ cart.total_price | money }}</span>
                                    </div>
                                </li>
                                {%- if show_shipping_rate_calculator -%}
                                    <li class="cart-total cart-total-shipping">
                                        <div class="cart-total-label">
                                            <span class="text">{{ 'general.cart.shipping' | t }}</span>
                                        </div>
                                        <div class="cart-total-value" style="display: none;"></div>
                                        {% render 'shipping-rates-calculator' %}
                                    </li>
                                {%- endif -%}
                                {%- if show_coupon_code -%}
                                    <li class="cart-total cart-total-coupon">
                                        <div class="cart-total-label">
                                            <span class="text">{{ 'general.cart.coupon_code' | t }}</span>
                                        </div>
                                        <div class="cart-total-value" style="display: none;"></div>
                                        <div class="cart-coupon-code form-field discount-code-field"> 
                                            <label class="form-label hiddenLabels" for="cart-coupon-code">{{ 'general.cart.coupon_code' | t }}</label> 
                                            <input class="form-input" autocomplete="off" type="text" name="discount" id="cart-coupon-code" placeholder="{{'general.cart.enter_coupo_code' | t }}" /> 
                                            <p class="form-text">{{ 'general.cart.coupon_code_text' | t }}</p>
                                        </div>
                                    </li>
                                {%- endif -%}
                                <li class="cart-total cart-total-grandtotal">
                                    <div class="cart-total-label">
                                        <span class="text">{{ 'general.cart.total' | t }}</span>
                                    </div>
                                    <div class="cart-total-value">
                                        <span class="text">{{ cart.total_price | money }}</span>
                                    </div>
                                </li>
                            </ul>
                            <div class="cart-actions">
                                {%- if settings.show_global_checkbox -%}
                                    <div class="cart-checkbox global-checkbox">
                                        <input class="global-checkbox--input" type="checkbox" name="conditions" id="cart_conditions" data-target="#cart-checkout">
                                        <label class="global-checkbox--label form-label--checkbox" for="cart_conditions">
                                            {{ settings.global_checkbox_text }}
                                        </label>
                                        {%- if settings.global_checkbox_link_text != blank -%}
                                            <a href="javascript&colon;void(0)" data-term-condition>
                                                {{ settings.global_checkbox_link_text | escape }}
                                            </a>
                                        {%- endif -%}
                                    </div>
                                {%- endif -%}
                                <div class="action-group">
                                    <button class="button button-1 button-checkout" {% if settings.show_global_checkbox %} disabled="disabled" {% endif %} id="cart-checkout">
                                        {{ 'sections.cart.proceed_to_checkout' | t }}
                                    </button>
                                    {% if continue_button_action == "1" %}
                                        <a class="button button-2 button-continue" href="{{ custom_button_link }}" role="button">
                                            {{ 'general.continue_shopping' | t }}
                                        </a>
                                    {% else %}
                                        <a class="button button-2 button-continue" href="javascript&colon;void(0)" onclick="window.history.back();" role="button" id="cart-previous-page-btn">
                                            {{ 'general.back_to_previous_page' | t }}
                                        </a>
                                    {% endif %}
                                </div> 
                            </div>
                        </form>
                    </div>
                </div>
            {%- else -%}
                <div class="cart-content-empty text-center">
                    <span class="cart-text">{{ 'sections.cart.empty' | t }}</span>
                    <div class="cart-actions">
                        {% if continue_button_action == "1" %}
                            <a class="button button-2 button-continue" href="{{ custom_button_link }}" role="button">
                                {{ 'general.continue_shopping' | t }}
                            </a>
                        {% else %}
                            <a class="button button-2 button-continue" href="javascript&colon;void(0)" onclick="window.history.back();" role="button" id="cart-previous-page-btn">
                                {{ 'general.back_to_previous_page' | t }}
                            </a>
                        {% endif %}
                    </div>
                </div>
            {%- endif -%}
        </div>
        <p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
        <p class="visually-hidden" id="shopping-cart-line-item-status" aria-live="polite" aria-hidden="true" role="status">{{ 'accessibility.loading' | t }}</p>
    </div>
</cart-items>

<style type="text/css" media="screen">
    #CartSection-{{ section.id }} .cart-container {
        padding-top: {{ padding_top }};
        padding-bottom: {{ padding_bottom }};
    }

    #CartSection-{{ section.id }} .cart-container.container-full {
        padding-left: {{ side_padding_full_width }};
        padding-right: {{ side_padding_full_width }};
    }

    @media (max-width: 1024px) {
        #CartSection-{{ section.id }} .cart-container {
            padding-top: {{ padding_top_tablet }};
            padding-bottom: {{ padding_bottom_tablet }};
        }
    }

    @media (max-width: 550px) {
        #CartSection-{{ section.id }} .cart-container {
            padding-top: {{ padding_top_mobile }};
            padding-bottom: {{ padding_bottom_mobile }};
        }
    }
</style>

<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>

{% schema %}
{
    "name": "t:sections.main_cart.name",
    "settings": 
        [
            {
                "type": "header",
                "content": "t:sections.main_lookbook_page.settings.header__1"
            },
            {
                "type": "checkbox",
                "id": "show_breadcrumb",
                "label": "t:sections.general.settings.breadcrumb.label__1",
                "default": false
            },
            {
                "type": "color",
                "id": "breadcrumb_color",
                "label": "t:sections.general.settings.breadcrumb.breadcrumb_color"
            },
            {
                "type": "select",
                "id": "breadcrumb_alignment",
                "label": "t:sections.general.settings.breadcrumb.label__2",
                "options": [
                    {
                        "value": "left",
                        "label": "t:sections.general.settings.breadcrumb.options__1"
                    },
                    {
                        "value": "center",
                        "label": "t:sections.general.settings.breadcrumb.options__2"
                    },
                    {
                        "value": "right",
                        "label": "t:sections.general.settings.breadcrumb.options__3"
                    }
                ],
                "default": "center"
            },
            {
                "type": "checkbox",
                "id": "show_page_title",
                "label": "t:sections.general.settings.page-title.label__1",
                "default": false
            },
            {
                "type": "color",
                "id": "page_title_color",
                "label": "t:settings_schema.typography.settings.typography.text_color"
            },
            {
                "type": "select",
                "id": "page_title_alignment",
                "label": "t:sections.general.settings.page-title.label__2",
                "options": [
                    {
                        "value": "left",
                        "label": "t:sections.general.settings.page-title.options__1"
                    },
                    {
                        "value": "center",
                        "label": "t:sections.general.settings.page-title.options__2"
                    },
                    {
                        "value": "right",
                        "label": "t:sections.general.settings.page-title.options__3"
                    }
                ],
                "default": "center"
            }, 
            {
                "type": "select",
                "id": "container",
                "label": "t:sections.layout.container.option",
                "default": "container",
                "options": [
                    {
                        "value": "container",
                        "label": "t:sections.layout.container.option1"
                    },
                    {
                        "value": "1170",
                        "label": "t:sections.layout.container.option4"
                    },
                    {
                        "value": "fullwidth",
                        "label": "t:sections.layout.container.option2"
                    },
                    {
                        "value": "1770",
                        "label": "t:sections.layout.container.option3"
                    }
                ]
            },
            {
                "type": "range",
                "id": "side_padding_full_width",
                "label": "t:sections.general.settings.container.padding_full",
                "info": "t:sections.general.settings.container.padding_full_info",
                "min": 0,
                "max": 100,
                "step": 1,
                "default": 0,
                "unit": "t:sections.general.settings.padding.unit"
            },
            {
                "type": "header",
                "content": "t:sections.layout.margin_top"
            },
            {
                "type": "range",
                "id": "mg_top_desktop",
                "label": "t:sections.layout.mg_desktop.label",
                "min": 0,
                "max": 100,
                "step": 5,
                "unit": "t:sections.layout.mg_desktop.unit",
                "default": 50
            },
            {
                "type": "range",
                "id": "mg_top_tablet",
                "label": "t:sections.layout.mg_tablet.label",
                "min": 0,
                "max": 100,
                "step": 5,
                "unit": "t:sections.layout.mg_desktop.unit",
                "default": 50
            },
            {
                "type": "range",
                "id": "mg_top_mobile",
                "label": "t:sections.layout.mg_mobile.label",
                "min": 0,
                "max": 100,
                "step": 5,
                "unit": "t:sections.layout.mg_desktop.unit",
                "default": 50
            },
            {
                "type": "header",
                "content": "t:sections.layout.margin_bottom"
            },
            {
                "type": "range",
                "id": "mg_bottom_desktop",
                "label": "t:sections.layout.mg_desktop.label",
                "min": 0,
                "max": 100,
                "step": 5,
                "unit": "t:sections.layout.mg_desktop.unit",
                "default": 50
            },
            {
                "type": "range",
                "id": "mg_bottom_tablet",
                "label": "t:sections.layout.mg_tablet.label",
                "min": 0,
                "max": 100,
                "step": 5,
                "unit": "t:sections.layout.mg_desktop.unit",
                "default": 50
            },
            {
                "type": "range",
                "id": "mg_bottom_mobile",
                "label": "t:sections.layout.mg_mobile.label",
                "min": 0,
                "max": 100,
                "step": 5,
                "unit": "t:sections.layout.mg_desktop.unit",
                "default": 50
            },
        {
            "type": "header",
            "content": "t:sections.main_cart.settings.header__1"
        },
        {
            "type": "checkbox",
            "id": "show_vendor",
            "label": "t:sections.main-product.settings.info.label__1",
            "default": false
        },
        {
            "type": "select",
            "id": "image_ratio",
            "label": "t:sections.general.settings.image-ratio.label__1",
            "default": "portrait",
            "options": [
                {
                    "value": "adapt",
                    "label": "t:sections.general.settings.image-ratio.options__1"
                },
                {
                    "value": "portrait",
                    "label": "t:sections.general.settings.image-ratio.options__2"
                },
                {
                    "value": "square",
                    "label": "t:sections.general.settings.image-ratio.options__3"
                },
                {
                    "value": "circle",
                    "label": "t:sections.general.settings.image-ratio.options__4"
                }
            ]
        },
        {
            "type": "range",
            "id": "portrait_aspect_ratio",
            "label": "t:sections.general.settings.image-ratio.label__2",
            "min": 101,
            "max": 150,
            "step": 1,
            "unit": "t:sections.general.settings.image-ratio.unit",
            "default": 148,
            "info": "t:sections.general.settings.image-ratio.info"
        },
        {
            "type": "header",
            "content": "t:settings_schema.countdown.name"
        },
        {
            "type": "checkbox",
            "id": "show_cart_countdown",
            "label": "t:settings_schema.countdown.settings.general.label__1",
            "default": true
        },
        {
            "type": "range",
            "id": "cart_countdown_time",
            "label": "t:settings_schema.countdown.settings.general.label__3",
            "default": 30,
            "min": 1,
            "max": 60,
            "step": 1,
            "unit": "t:settings_schema.before_you_leave.settings.general.unit"
        },
        {
            "type": "header",
            "content": "t:sections.main_cart.settings.header__2"
        },
        {
            "type": "checkbox",
            "id": "show_trust_image",
            "label": "t:sections.main_cart.settings.label__1",
            "default": true
        },
        {
            "type": "header",
            "content": "t:sections.main_cart.settings.header__3"
        },
        {
            "type": "select",
            "id": "continue_button_action",
            "label": "t:sections.main_cart.settings.label__2",
            "default": "1",
            "options": [
                {
                    "value": "1",
                    "label": "t:sections.main_cart.settings.option__1"
                },
                {
                    "value": "2",
                    "label": "t:sections.main_cart.settings.option__2"
                }
            ]
        },
        {
            "type": "url",
            "id": "custom_button_link",
            "label": "t:sections.main_cart.settings.label__3",
            "info": "t:sections.main_cart.settings.info"
        }
    ]
}
{% endschema %}

 

 

 

 

 
 

 

 

 
 

 

 

Cedcommerce
Shopify Expert
718 76 112

Hello @Audrey6

 

To display the discounted price for each product in the cart and show the original price along with the discounted price in the subtotal and total, you'll need to modify your Ella theme's code with some custom code. 

 

Here's how you can do it:

 

Go to your Shopify admin dashboard.

Go to Online Store and select Themes.

Find your theme’s settings and click on Actions.

Select Edit Code from the drop-down menu.

 

In the code editor, locate the template file responsible for displaying the cart page. This file is usually named cart.liquid or cart-template.liquid. If you're unsure, you can search for the code snippet or consult Ella's documentation.

 

Within the template file, find the section where the item price is displayed. It might look something like this:

 

<span class="item-price">{{ item.price | money }}</span>

Replace the above line with the following code:

 

{% if item.line_price == item.original_line_price %}

<span class="item-price">{{ item.price | money }}</span>

{% else %}

<span class="item-price discounted-price">{{ item.price | money }}</span>

<span class="item-original-price">{{ item.original_price | money }}</span>

{% endif %}

 

This code checks if the line price of the item matches the original line price (indicating no discount). It displays the regular price. Otherwise, it displays the discounted price and the original price.

 

To show the discounted price and original price in the subtotal and total, find the code that displays the cart subtotal and total. It might look like this:

 

<span class="subtotal-price">{{ cart.subtotal_price | money }}</span>

<span class="total-price">{{ cart.total_price | money }}</span>

Replace the above lines with the following code:

 

<span class="subtotal-price">{{ cart.total_discounted_price | money }}</span>

<span class="subtotal-original-price">{{ cart.total_price | money }}</span>

<span class="total-price">{{ cart.total_discounted_price | money }}</span>

<span class="total-original-price">{{ cart.total_price | money }}</span>

 

This code shows the discounted price and the original price for both the subtotal and the total.

Save the changes and preview your cart page to see the updated prices.

 

The above solution might be tricky to handle if you are not experienced with liquid code or Shopify theme, please consider hiring a Shopify expert or a experienced developer who can help you with it. 

 

Hope it helps. Let us know if you need any more help with your store. 

 

Regards, 

CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
Audrey6
New Member
4 0 0

Hi thank you so much

But it doesn't work, it will not shows second price on the Total 

and actually, the cart.total_price is the discounted price

This is the code, after replace, nothing happened

 <div class="cart-total-value">
                                       <span class="text">{{ cart.total_price | money }}</span>
                                    </div>

 

QPadelShop
Visitor
1 0 0

Hi Cedcommerce,

 

I am using the Dawn Theme and the code is slightly different from what you are sharing.

Can you tell me how I have to change the code underneath to be able to see the original and discount prices at the cart?

 

{%- if item.original_price != item.final_price -%}
<div class="cart-item__discounted-prices">
<span class="visually-hidden">
{{ 'products.product.price.regular_price' | t }}
</span>
<s class="cart-item__old-price product-option">
{{- item.original_price | money -}}
</s>
<span class="visually-hidden">
{{ 'products.product.price.sale_price' | t }}
</span>

<strong class="cart-item__final-price product-option">
{{ item.final_price | money }}
</strong>
</div>
{%- else -%}
<div class="product-option">
{{ item.original_price | money }}
</div>
{%- endif -%}