How to customize the order summary on checkout page?

Shopify Discussion
1

Hi,

I have Shopify plus account and I want to customise order summary section on checkout page.

I want to add compare at price on order summary section. Please help me in this how can we do it?

image_2022_01_18T07_18_26_671Z.png
image_2022_01_18T07_18_26_671Z.png1180×927 58.9 KB

image_2022_01_18T07_18_41_049Z.png
image_2022_01_18T07_18_41_049Z.png1786×1046 190 KB

Comapre at price is showing on Product page but it is not showing on Checkout page. Please see the screenshot.

1 Like
2

Hi, I am available now.

I can help you to customize order summary section on checkout page.

Waiting for your message.

Thanks

3

@shaikhmasud
Here is the link

https://onlygrowth.com/blogs/posts/customizing-your-checkout-page-with-shopify-plus

i hope it will help you to customize.

4

Hi @shaikhmasud

Add this code in items loop.

{% if item.variant.compare_at_price > item.variant.price %}
  <s>{{ item.variant.compare_at_price | money }}</s>
{% endif %}
5

@Dbuglabpvtltd Can you let me know where exact add this code? Thanks!!

6

@shaikhmasud

can you please share your file code with me? then I can tell you exactly.

7 

{{ content_for_header }}

{{ checkout_stylesheets }}
{{ checkout_scripts }}

{% if product.id > 1 %}

{% if product.variants.size > 1 %} {% endif %}

{% endif %}

{{ skip_to_content_link }}

{{ order_summary_toggle }}

{{ content_for_logo }}

## **All discounted products and products eligible for promotion are FINAL SALE.**

  
{{ content_for_order_summary }}

{% comment %}
{% assign hasItem = false %}
{% assign itm = false %}
{%- for line_item in cart.items -%}
{% if line_item.variant_id == '40125709287583' %}
{% assign hasItem = true %}
{% endif %}

{% if line_item.product.tags contains 'COLLECTION_CLEARANCE' %}
{% assign itm = true %}
{% endif %}
{%- endfor -%}

{% endcomment %}

{{ tracking_code }}
8

@Dbuglabpvtltd You can check the above code.

9
{{ page_title }}

{{ content_for_header }}

{{ checkout_stylesheets }}
{{ checkout_scripts }}

{% if product.id > 1 %}

{% if product.variants.size > 1 %} {% endif %}

{% endif %}

{{ skip_to_content_link }}
{{ content_for_logo }}

{{ order_summary_toggle }}

{{ content_for_logo }} {{ breadcrumb }} {{ alternative_payment_methods }} {{ content_for_layout }} {{ content_for_footer }}
{%- for line_item in cart.items -%} {% if line_item.variant.compare_at_price > line_item.variant.price %} {{ line_item.variant.compare_at_price | money }} {% endif %} {%- endfor -%}

{% comment %}
{% assign hasItem = false %}
{% assign itm = false %}
{%- for line_item in cart.items -%}
{% if line_item.variant_id == ‘40125709287583’ %}
{% assign hasItem = true %}
{% endif %}

{% if line_item.product.tags contains ‘COLLECTION_CLEARANCE’ %}
{% assign itm = true %}
{% endif %}
{%- endfor -%}

{% endcomment %}

{{ tracking_code }}

10

@shaikhmasud

can you try this.
Have to use some jquery code as well to append the prices accordingly.

Dbuglabpvtltd_0-1642493419513.png
Dbuglabpvtltd_0-1642493419513.png1365×597 29 KB

11

@Dbuglabpvtltd

I have tried the code which you sent. It is not changed on forntend.

12

@shaikhmasud
Need to add the jquery code as well according to requirement.
because products content is automatically created on checkout.

If you are familiar with jquery you can do this.

13

@Dbuglabpvtltd

Can you please share the example of jquery code? So i can add accordingly as requirement.

14

@shaikhmasud

Its a time consuming process. Need to create code according to your website requirement.
for this need your store details.