How to add text next to product price on the product page?

Solved
Tourist
26 0 1

Hi there, 

 

I am having troubles trying to figure out how to add "Each" after the prices in our Tournament awards collection. Given we have the option for customers to bulk order, having each after the price would be very helpful to avoid any confusion when ordering!

 

My site is www.vipgolfawards.com if you all want to check it out and let me know what steps would be best to get this handled!

 

Thanks and I can't wait to hear what you all have to say

0 Likes
Highlighted

Success.

Shopify Partner
51 12 7

Hey Jakehardin21,

 

In your theme editor, find the "product-grid-item.liquid" file. Inside that file, search for the "grid-product__price" span. Mine was on line #84. Replace that span element with this one:

 

<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> Each</span>
</span>
0 Likes
Tourist
26 0 1

Hey there, so 'Each' is now showing up in the collection pages, but not once you actually click on the product it is not there. Was hoping there was a way to show 'Each' once selected on a product as well.

 

Also, now when you go to the collection pages, the product name is not showing up, only the price and 'each'. Is there a way to have the product name as well as the price and 'each'? I attached what it looks like on my end to help you out.

 

Thanks again!

 

Capture.JPGCapture1.JPG

0 Likes

Success.

Shopify Partner
51 12 7

Sounds like you replaced the title span as well. Make sure you are only replacing the element with the class of "grid-product__price". In my dev theme this was line 84, but it may be on another line for you depending on other edits made to your theme.

 

For product detail pages, you'll need to find and edit the "product-price.liquid" file in your theme's snippets. Once you've opened the file replace the span with the id "ProductPrice" with this span:

 

<span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}"
    {% unless variant.available %}aria-hidden="true"{% endunless %}>
    {{ variant.price | money }}
    <span> Each</span>
  </span>
0 Likes
Tourist
26 0 1

Beautiful, thanks so much!

 

One last thing, When on the collection page looking at the products offered, is there any way to add a bit of spacing between the product name and price? They are really close together and it would look much cleaner if they were separated a bit!

 

Thanks again in advance, you are a life saver!

 

Capture2.JPG

0 Likes

Success.

Shopify Partner
51 12 7

There's usually a dash element between the title and price, did you remove that intentionally?

 

In the "product-grid-item.liquid" file, find the span with the class "grid-product__title" and add a space after {{ product.title }}

 

// This
<span class="grid-product__title">{{ product.title }}</span>

// Becomes this
<span class="grid-product__title">{{ product.title }} </span>
0 Likes
Tourist
26 0 1

That must have been it, thanks again! As you can tell I am not well versed in CSS so I will take all the help I can get!

 

Last question I promise, so now that 'Each' is showing up for all of my products, how am I able to keep the wording 'each' visible once clicking on a different variant via one of our products. 

 

For example, on the tournament award I attached below you can see that 'each' shows up when originally clicking on the product. However, if you decide you want to go with a different size or order number, 'each disappears'. Not sure if this is something that can be fixed or not, but would be really nice if it could. 

 

Anyways, not the end of the world if you don't have a proposed solution. Regardless, you have been a great deal of help and I cannot thank you enough.

0 Likes
Tourist
26 0 1

Success.

Shopify Partner
51 12 7

Hey Jake,

 

Good catch. The price is being updated with javascript and overwriting everything in that span with the new price.

 

To fix this, you'll need to move the element with "Each" outside of the price span.

 

Once again, open up "product-price.liquid" and make the following edit:

 

// Change this
<span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}"
    {% unless variant.available %}aria-hidden="true"{% endunless %}>
    {{ variant.price | money }}
    <span> Each</span>
  </span>

// To this
<span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}"
    {% unless variant.available %}aria-hidden="true"{% endunless %}>
    {{ variant.price | money }}
  </span>
  <span> Each</span>

You're welcome, happy to help!

0 Likes
Tourist
26 0 1

You are the best! Also, we will be starting up a new online store for WelcomeNewborn (a newborn photography company we recently acquired at the beginning of the month) by the end of the year.

 

If you are up for it, I would love to talk more and explore the idea of possibly putting you on retainer!

 

Thanks again and I wish you the best.

- Jake

 

 

1 Like