FROM CACHE - en_header
Technical Q&A
Liquid, JavaScript, themes, sales channels
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
- Shopify Community
- :
- Shopify Discussion
- :
- Technical Q&A
- :
- Cart product doesn't show discount price
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Cart product doesn't show discount price
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
05-29-2023
10:39 PM
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
Labels:
- Labels:
-
Shopify Theme
-
third party theme
Replies 5 (5)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
05-29-2023
11:59 PM
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
https://link.fordeer.io/YZL4Ge
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
05-30-2023
02:51 AM
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: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"> {{ 'accessibility.unit_price_separator' | t }} </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: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: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: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"> {{ 'accessibility.unit_price_separator' | t }} </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: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: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: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: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: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: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: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 %}
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
05-30-2023
05:17 AM
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: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"> {{ 'accessibility.unit_price_separator' | t }} </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: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: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: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"> {{ 'accessibility.unit_price_separator' | t }} </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: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: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: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: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: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: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: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 %}
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
05-30-2023
07:04 AM
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
- 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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
05-31-2023
05:18 AM
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>
Community Browser
-
Shopify Community
Shopify Discussion
- Shopify Discussions
- Store Feedback
- Shopify Design
- Community AMAs (Ask Me Anything)
- Announcements
- Shopify Apps
- Shopify Education & Certifications
- Shopify Translate & Adapt
- Ecommerce Marketing
- Technical Q&A
- Site Speed
- Retail and Point of Sale
- International Commerce
- Payments, Shipping, and Fulfillment
- Accounting and Taxes
- Wholesale and Dropshipping
- Shopify Flow App
- Shopify Scripts
Partners and Developers
- Extensions
- Authentication and Access
- Fulfillment and Inventory
- GraphQL Basics and Troubleshooting
- Hydrogen, Headless, and Storefront APIs
- Metafields and Custom Data
- Customers, Discounts, and Orders
- Subscriptions APIs
- Billing API
- Products, Variants, and Collections
- Shopify CLI and Tools
- Shopify Functions
- Online Store and Theme Development
- Webhooks and Events
-
Groups
- English video guides and tutorials
- Build on Shopify
- Master the holidays with Shopify: Top 10 strategies for a successful season
- Blog
Community Blog Articles
Recap: How To Run A Flash Sale In Shopify Webinar
This blog post is a recap of the webinar Getting Ready For BFCM: How To Run A Flash Sal...
By Jacqui Oct 3, 2023
The 30-30-30 Rule: A Balanced Approach to Social Media for Startups
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023
How To Gain Customer Trust With Your Store’s Footer
Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023-
Shopify Community
Shopify Design Shopify Discussions Partners & Developers Technical Q&A Payments, Shipping, and Fulfillment -
Support
24/7 Support Shopify Help Center API documentation Free Tools -
Shopify
Contact Partner Program Shopify Engineering Affiliate Program App Developers Investors -
Quick Links
Register Log in