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

Technical Q&A
,
1

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
cart.png365×646 21.5 KB

2

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:
<span class="cart__price">
{{ item.original_price | money }}
</span>
  1. Replace the above code with the following code to display the discounted price as well:
<span class="cart__price">
{{ item.final_line_price | money }}
<del>{{ item.original_price | money }}</del>
</span>
  1. Save the changes to the file.
  2. In the same “Snippets” section, open the “cart-totals.liquid” file.
  3. Find the code that displays the subtotal and total prices. It might look similar to this:
<span class="cart-subtotal__price">
{{ cart.total_price | money }}
</span>
  1. Replace the above code with the following code to show both the discounted price and the original price:
<span class="cart-subtotal__price">
{{ cart.final_price | money }}
<del>{{ cart.original_price | money }}</del>
</span>
  1. Save the changes to the file.
  2. Preview your store and add a product to the cart to see the updated prices displaying both the discounted price and the original price.
  3. 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.

3

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


{%- 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
-%}

{% 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 %}
4

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 }}
{{ item.original_price | money }}, but it doesn’t work

This is the code of the file

Can you check it for me?

Thanks in advance.


{%- 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
-%}

{% 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 %}
5

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:

{{ item.price | money }}

Replace the above line with the following code:

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

{{ item.price | money }}

{% else %}

{{ item.price | money }}

{{ item.original_price | money }}

{% 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:

{{ cart.subtotal_price | money }}

{{ cart.total_price | money }}

Replace the above lines with the following code:

{{ cart.total_discounted_price | money }}

{{ cart.total_price | money }}

{{ cart.total_discounted_price | money }}

{{ cart.total_price | money }}

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

6

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


                                       {{ cart.total_price | money }}
7

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

8

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

{{ 'products.product.price.regular_price' | t }} {{- item.original_price | money -}} {{ 'products.product.price.sale_price' | t }} {{ item.final_price | money }}
{%- else -%}
{{ item.original_price | money }}
{%- endif -%}