SHOCHA Posted October 16, 2020 Share Posted October 16, 2020 (edited) 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! Edited October 16, 2020 by SHOCHA Link to comment
tuanphan Posted October 17, 2020 Share Posted October 17, 2020 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. SHOCHA 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
paul2009 Posted October 17, 2020 Share Posted October 17, 2020 (edited) 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 Edited October 21, 2020 by paul2009 typo SHOCHA 1 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
SHOCHA Posted October 21, 2020 Author Share Posted October 21, 2020 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? Link to comment
SHOCHA Posted October 21, 2020 Author Share Posted October 21, 2020 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 Link to comment
SHOCHA Posted October 27, 2020 Author Share Posted October 27, 2020 Anybody any more ideas? I would really appreciate it 🤓 Link to comment
paul2009 Posted October 27, 2020 Share Posted October 27, 2020 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 ↘️ About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
SHOCHA Posted October 27, 2020 Author Share Posted October 27, 2020 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 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment