Shanika Posted June 25, 2020 Posted June 25, 2020 Site URL: http://cleanr.com Hi I need help I want to put "excluding VAT" under the £ price on the shop page. I haven't been able to find any codes for doing that. Please see the example on what I want it to look like.
Solution paul2009 Posted June 25, 2020 Solution Posted June 25, 2020 (edited) On 6/25/2020 at 6:53 PM, Shanika said: I need help I want to put "excluding VAT" under the £ price on the shop page. You can do this by adding the following to Design > Custom CSS: .product-price:after { content: 'Excluding VAT'; display: block; margin-top: 7px; color: red; text-transform: uppercase; } Updated in August 2022 due to the Squarespace Price Formatting update (23 August 2022). Edited August 28, 2022 by paul2009 Squarespace Price Formatting update Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
Shanika Posted June 25, 2020 Author Posted June 25, 2020 5 minutes ago, paul2009 said: You can do this by adding the following to Design > Custom CSS: .product-price .sqs-money-native:after { content: 'Excluding VAT'; display: block; margin-top: 7px; color: red; text-transform: uppercase; } Hi Paul, THANK YOU! I tried that still I don't see anything. I am using version 7.1. Please see attached. Am I doing something wrong? sorry new to this
Shanika Posted June 25, 2020 Author Posted June 25, 2020 1 minute ago, Shanika said: 10 minutes ago, paul2009 said: You can do this by adding the following to Design > Custom CSS: .product-price .sqs-money-native:after { content: 'Excluding VAT'; display: block; margin-top: 7px; color: red; text-transform: uppercase; } Never mind I removed the other css and it worked 🙂 amazing thank you so much!
Guest Posted August 27, 2020 Posted August 27, 2020 Hello Paul Sorry to hijack Shanika's thread but is it possible to go one step further and instead of adding Excluding VAT on next line to add it as a suffix to price? If so is it also possible to do a calculation based on ex vat price and show inc vat pricing something like below... £100.00 + VAT [£120.00 inc VAT} Thanks in advance Nick
paul2009 Posted August 28, 2020 Posted August 28, 2020 (edited) On 8/27/2020 at 10:37 AM, nickcadsoftuk said: is it possible to go one step further and instead of adding Excluding VAT on next line to add it as a suffix to price? If so is it also possible to do a calculation based on ex vat price and show inc vat pricing You can add the label as a suffix by removing some of the lines of code that I supplied. For example: .product-price:after { content: '+VAT'; } However, this will only work for products without variants. Also, if you want to show the ex/inc pricing, you’ll need to do it entirely differently, using JavaScript. Updated because of the Squarespace Price Formatting update that started rolling out on 23 August 2022. Edited August 28, 2022 by paul2009 Updated due to Squarespace Price Formatting update Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
Guest Posted August 28, 2020 Posted August 28, 2020 Thanks Paul, is this something you'd consider as paid for job via SF Digital? All the best Nick
HG-Design Posted July 11, 2022 Posted July 11, 2022 HI @paul2009, thank you for posting this solution which works great however as the product has variables, once you select the dropdown options, the added ex vat test is not displayed. Page: https://wvcharge.squarespace.com/waev-charge-store/p/waev-charge-ev1 Is there an additional bit of CSS to make it remain permenatly please? Thank you in advance, Joe
paul2009 Posted July 11, 2022 Posted July 11, 2022 1 hour ago, HG-Design said: as the product has variables, once you select the dropdown options, the added ex vat test is not displayed When a valid variant is selected, the span with the sqs-money-native class will disappear but the parent div with the product-price class will still exist and can be used instead. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment