Display Normal Price next to Sale/Compare at Price

[Joslin]

Hey!

How do I display the normal price next to the sale/ compared price on the page with all the products?

www.createclothing.com.au

Thank you

[KetanKumar]

@Joslin

sorry for any issue can you please show me issue image and give one image what do you want?

[Joslin]

Sure, I just want the original price displayed on the product page next to the sale price.
Thank you

[KetanKumar]

@Joslin

can you please sent product card or product-gird-item code

[Joslin]

Show More

I’m not sure what that is.

Show More

I put a compared price u to my shopify products so the compared price shows when you’ve clicked into the product but I want the compared price to also show on the product grid where it says the price.

[KetanKumar]

@Joslin

yes please share code so i will update

[Joslin]

I’m not sure how to do that sorry

[KetanKumar]

@Joslin

product gird item

snnipets folder

[Joslin]

{% comment %}

This snippet is used to showcase each product during the loop,
‘for product in collection.products’ in collection.liquid.

A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.

Example

• assign grid_item_width = ‘large–one-quarter medium–one-half’

{% endcomment %}

{% unless grid_item_width %}
{% assign grid_item_width = ‘large–one-third medium–one-half’ %}
{% endunless %}

{% unless width %}
{%- assign width = 310 -%}
{% endunless %}
{% unless height %}
{%- assign height = 415 -%}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}

{%- assign variant = product.selected_or_first_available_variant -%}

{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

{% if featured_image.src== blank %} {% else %} {% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}

{% endif %} {% if sold_out %}

{{ 'products.product.sold_out_html' | t }}

{% elsif on_sale %}

{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}

{{ 'products.general.save_html' | t: saved_amount: saved_amount }}

{% endif %}

{{ product.title }} — {% if on_sale %} {{ 'products.general.sale_price' | t }} {% else %} {{ 'products.general.regular_price' | t }} {% endif %} {% if product.price_varies %} {{ product.price_min | money_without_trailing_zeros }} + {% else %} {{ product.price | money_without_trailing_zeros }} {% endif %}

{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ ‘general.accessibility.unit_price_separator’ | t }} 
{%- endcapture -%}

{%- capture unit_price_base_unit -%}

{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}

{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}

{%- endcapture -%}

{{ ‘products.general.unit_price’ | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}

{%- endif -%}

{% if section.settings.product_vendor_enable %}

{{ product.vendor }}

{% endif %}

[KetanKumar]

@Joslin

thanks for code can you try this

{% comment %}

This snippet is used to showcase each product during the loop,
'for product in collection.products' in collection.liquid.

A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.

Example
- assign grid_item_width = 'large--one-quarter medium--one-half'

{% endcomment %}

{% unless grid_item_width %}
{% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}

{% unless width %}
{%- assign width = 310 -%}
{% endunless %}
{% unless height %}
{%- assign height = 415 -%}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}

{%- assign variant = product.selected_or_first_available_variant -%}

{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% if featured_image.src== blank %}

{% else %}
{% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}

{% endif %}

{% if sold_out %}

{{ 'products.product.sold_out_html' | t }}

{% elsif on_sale %}

{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}

{{ 'products.general.save_html' | t: saved_amount: saved_amount }}

{% endif %}

{{ product.title }}

—

{% if on_sale %}
{{ 'products.general.sale_price' | t }}
{% else %}
{{ 'products.general.regular_price' | t }}
{% endif %}
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}

+

{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}

{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ 'general.accessibility.unit_price_separator' | t }} 
{%- endcapture -%}

{%- capture unit_price_base_unit -%}

{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}

{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}

{%- endcapture -%}

{{ 'products.general.unit_price' | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}

{%- endif -%}

{% if product.title %}
  {%- assign compare_at_price = product.compare_at_price -%}
  {%- assign price = product.price -%}
  {%- assign price_varies = product.price_varies -%}
  {%- assign available = product.available -%}
{% else %}
  {%- assign compare_at_price = 1999 -%}
  {%- assign price = 1999 -%}
  {%- assign price_varies = false -%}
  {%- assign available = true -%}
{% endif %}

{%- assign money_price = price | money -%}

{% if compare_at_price > price %}
  {% if price_varies %}
    {{ 'products.product.regular_price' | t }}
     
      {{ money_price }}
      {{ 'products.product.on_sale' | t }}
    
	~~{{ compare_at_price | money }}~~
   
  {% else %}
    {{ 'products.product.regular_price' | t }}
    
      {{ money_price }}
      {{ 'products.product.on_sale' | t }}
    
	~~{{ compare_at_price | money }}~~
   
  {% endif %}
{% else %}

  {% if price_varies %}
    {{ money_price }}
  {% else %}
    {{ 'products.product.regular_price' | t }}
    {{ money_price }}
  {% endif %}
{% endif %}

{% unless available %}
  {{ 'products.product.sold_out' | t }}
{% endunless %}

{% if section.settings.product_vendor_enable %}

{{ product.vendor }}

{% endif %}

[Joslin]

Thank you.

I’ve just checked and there seems to be an error with double the current price and says something about translation. I have the Shopify translating currency (booster app, multi currency converter) and language app (uplinky language translator).

[KetanKumar]

@Joslin

i see it can be done some customization code

[Joslin]

Are you able to help me with that?

[KetanKumar]

@Joslin

yes i can do this please DM details