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]

Click to expand...

I’m not sure what that is. 

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]

<!-- /snippets/product-grid-item.liquid -->
{% 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.' -%}

<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
<div class="grid-product__wrapper">
<div class="grid-product__image-wrapper">
<a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url }}" data-image-link>
{% if featured_image.src== blank %}
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
{% 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 %}
<div id="{{ img_wrapper_id }}" class="product--wrapper">
<div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
<img class="product--image lazyload {{ img_id_class }}"
data-src="{{ img_url }}"
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ featured_image.alt | escape }}"
data-image>
</div>
</div>
<noscript>
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
</noscript>
{% endif %}

</a>
{% if sold_out %}
<div class="grid-product__sold-out">
<p>{{ 'products.product.sold_out_html' | t }}</p>
</div>
{% elsif on_sale %}
<div class="grid-product__on-sale">
{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
<p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
</div>
{% endif %}
</div>

<a href="{{ product.url }}" class="grid-product__meta">
<span class="grid-product__title">{{ product.title }}</span>

<span class="grid-product__price-wrap">
<span class="long-dash">—</span>
<span class="grid-product__price">
{% if on_sale %}
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
<span class="icon-fallback-text">
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span>
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
</span>

{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}

{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}

{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
</span>
{% if section.settings.product_vendor_enable %}
<p class="grid-product__vendor">{{ product.vendor }}</p>
{% endif %}
</a>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
</div>

[KetanKumar]

@Joslin 

thanks for code can you try this 

<!-- /snippets/product-grid-item.liquid -->
{% 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.' -%}

<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
<div class="grid-product__wrapper">
<div class="grid-product__image-wrapper">
<a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url }}" data-image-link>
{% if featured_image.src== blank %}
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
{% 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 %}
<div id="{{ img_wrapper_id }}" class="product--wrapper">
<div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
<img class="product--image lazyload {{ img_id_class }}"
data-src="{{ img_url }}"
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ featured_image.alt | escape }}"
data-image>
</div>
</div>
<noscript>
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
</noscript>
{% endif %}

</a>
{% if sold_out %}
<div class="grid-product__sold-out">
<p>{{ 'products.product.sold_out_html' | t }}</p>
</div>
{% elsif on_sale %}
<div class="grid-product__on-sale">
{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
<p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
</div>
{% endif %}
</div>

<a href="{{ product.url }}" class="grid-product__meta">
<span class="grid-product__title">{{ product.title }}</span>

<span class="grid-product__price-wrap">
<span class="long-dash">—</span>
<span class="grid-product__price">
{% if on_sale %}
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
<span class="icon-fallback-text">
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span>
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
</span>

{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}

{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}

{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
</span>
<!-- snippet/product-price.liquid -->
{% 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 %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
     <span class="product-price__price product-price__sale">
      {{ money_price }}
      <span class="product-price__sale-label">{{ 'products.product.on_sale' | t }}</span>
    </span>
	<s class="product-price__price">{{ compare_at_price | money }}</s>
   
  {% else %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <span class="product-price__price product-price__sale">
      {{ money_price }}
      <span class="product-price__sale-label">{{ 'products.product.on_sale' | t }}</span>
    </span>
	<s class="product-price__price">{{ compare_at_price | money }}</s>
   
  {% endif %}
{% else %}

  {% if price_varies %}
    <span class="product-price__price">{{ money_price }}</span>
  {% else %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <span class="product-price__price">{{ money_price }}</span>
  {% endif %}
{% endif %}

{% unless available %}
  <span class="product-price__sold-out">{{ 'products.product.sold_out' | t }}</span>
{% endunless %}

{% if section.settings.product_vendor_enable %}
<p class="grid-product__vendor">{{ product.vendor }}</p>
{% endif %}
</a>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
</div>

[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