Adding text to price on SHOP Page

Site URL: https://www.sho-cha.com/

Hey I need help adding details to a product price on my SHOP page (the product overview with the thumbnails).
I am required by law to add a base price to some of my products right under the price itself, as they are sold in 30g packages.

I managed to add the text to both products in the product details page but it won't show on the shop page:

#item-5d22561c1407cc00019e2da1 span.sqs-money-native:after {
    content: "(Grundpreis 33.33€/100g)";
      display: block;
     margin-top: 7px;
      font-style: italic;
      font-size: 12px
}

#item-5d22566b19a0eb0001cc04cf span.sqs-money-native:after {
    content: "(Grundpreis 33.33€/100g)";
      display: block;
     margin-top: 7px;
      font-style: italic;
      font-size: 12px
}

Right now I got the "show price" on the SHOP page disabled in order not to get into legal trouble.

Help would by much appreciated. Thanks!

If you can't enable price & share link to shop page. Can you duplicate the site & share link to shop page on the duplicated site? We can check easier.

On 10/16/2020 at 4:24 PM, SHOCHA said:

I am required by law to add a base price to some of my products right under the price itself, as they are sold in 30g packages. I managed to add the text to both products in the product details page.

Hi 👋

I see that you've manually added unit prices "per 100g" to Product Detail pages. This may work for a few products, but you'll need to adjust it every time the price changes.

With some code, it should be possible to automate this so that unit prices are calculated automatically and then appended to all prices - on product detail and product list pages. 

Can you provide a few more details of the legal requirements, because you said that only some of your products need this.

For example, how do you define which products need it and do they all need the same unit value (100g)?

Thanks

-Paul

On 10/17/2020 at 10:53 AM, tuanphan said:

If you can't enable price & share link to shop page. Can you duplicate the site & share link to shop page on the duplicated site? We can check easier.

 

As it is the Shop page I can't seem to duplicate it but I enabled the prices for now. Maybe this already helps?

On 10/17/2020 at 11:17 AM, paul2009 said:

Hi 👋

I see that you've manually added unit prices "per 100g" to Product Detail pages. This may work for a few products, but you'll need to adjust it every time the price changes.

With some code, it should be possible to automate this so that unit prices are calculated automatically and then appended to all prices - on product detail and product list pages. 

Can you provide a few more details of the legal requirements, because you send that only some of your products need this. For example, how do you define which products need it and do they all need the same unit value (100g)?

Thanks

-Paul

Hi Paul,

the "per 100g" note only needs to be added to the products "Matcha N°1" and "Matcha N°2". In Germany it is required for products that are not exactly 100g/1kg/1 litre and so on to add a "per 100g or per 1 litre" price quote. Both Matcha products are 30g that is why I need to give the so called base price for them. All other products don't need it.

Thank you for looking into this and let me know if you need any more details.

Sascha

Anybody any more ideas? I would really appreciate it 🤓

On 10/21/2020 at 8:47 AM, SHOCHA said:

the "per 100g" note only needs to be added to the products "Matcha N°1" and "Matcha N°2". In Germany it is required for products that are not exactly 100g/1kg/1 litre and so on to add a "per 100g or per 1 litre" price quote. Both Matcha products are 30g that is why I need to give the so called base price for them.

Hi Sascha

I didn't see your updates until today but thanks for the additional information. It is really helpful 🙂.

Your original thinking was good because Squarespace used to place product IDs into standard ID attributes such as #item-5d22561c1407cc00019e2da1. However, they now use HTML5 custom data attributes so that these values can be stored in an easy, standards-compliant way. The reliable selector is now data-item-id="5d22561c1407cc00019e2da1". 

If you remove your original CSS and add the following ( to Design > Custom CSS) it should work on both the Product List page and the Product Detail pages:

/* Add "per 100g" caption to products with specific IDs */
/* Copyright Soundfocus Digital Media [sf.digital] */
/* Use freely in your code injection. Do NOT re-publish */
.hentry[data-item-id="5d22561c1407cc00019e2da1"], .hentry[data-item-id="5d22566b19a0eb0001cc04cf"] {
  .product-price:after {
    content: "(Grundpreis 33.33€/100g)";
    display: block;
    margin-top: 7px;
    font-size: 12px
  }
}

-Paul

Notes
The code in this post refers to the data-item-ids of the two specific products on this website. As the data-item-id is specific to each product, to use this code on another website, or for other products, you'll need to replace the IDs with your product IDs.

    If a post helps you, please click a "Like" option below  ↘️

7 hours ago, paul2009 said:

Hi Sascha

I didn't see your updates until today but thanks for the additional information. It is really helpful 🙂.

Your original thinking was good because Squarespace used to place product IDs into standard ID attributes such as #item-5d22561c1407cc00019e2da1. However, they now use HTML5 custom data attributes so that these values can be stored in an easy, standards-compliant way. The reliable selector is now data-item-id="5d22561c1407cc00019e2da1". 

If you remove your original CSS and add the following ( to Design > Custom CSS) it should work on both the Product List page and the Product Detail pages:

/* Add "per 100g" caption to products with specific IDs */
/* Copyright Soundfocus Digital Media [sf.digital] */
/* Use freely in your code injection. Do NOT re-publish */
.hentry[data-item-id="5d22561c1407cc00019e2da1"], .hentry[data-item-id="5d22566b19a0eb0001cc04cf"] {
  .product-price:after {
    content: "(Grundpreis 33.33€/100g)";
    display: block;
    margin-top: 7px;
    font-size: 12px
  }
}

-Paul

Notes
The code in this post refers to the data-item-ids of the two specific products on this website. As the data-item-id is specific to each product, to use this code on another website, or for other products, you'll need to replace the IDs with your product IDs.

    If a post helps you, please click a "Like" option below  ↘️

 

Hi Paul,

you really made my day. This works like a charme. Thank you so much! Before I couldn't display prices on the Product List Page without running the danger of getting sued. Oh this is gold :)
Do you have a patreon or something?

Thanks again and have a great evening!
Sascha