How to Display “+ VAT” Next to Squarespace Product Prices with Simple CSS

Welcome to another blog post where I share tips, tricks, and workarounds for getting the most out of Squarespace. Today’s post addresses a request I received from one of my UK-based clients. They wanted to display “+ VAT” alongside the product prices in their Squarespace store.

At first glance, this seems tricky because it appears that the price is a field which only accepts numeric values, but with just a couple of lines of CSS, it’s straightforward. Let’s dive in!

The Scenario

We have a product—let's say a pair of headphones priced at £75.00, excluding VAT. The client wants to display “+ VAT” next to the price, both on the product page and in the product summary.

Here’s how to make that happen using CSS.

Step-by-Step: Adding “+ VAT” with CSS

1. Access the Custom CSS Editor
   First, navigate to your Squarespace backend. Go to Website Tools, then Custom CSS.

2. Add the CSS Code
   Here’s the CSS code we’ll use:

   .sqs-money-native:after { content: ' + VAT'; }

   This CSS targets the product price and tells Squarespace to add the text “plus VAT” right after the price. You can customise this text to anything you like. For example, if you prefer "excludes VAT," simply change the content to:

   .sqs-money-native:after { content: ' excludes VAT'; }

3. Save the Changes
   Once you’ve made the changes, click Save. Now, if you return to your store, you’ll see that the price is displayed as “£75.00 + VAT,” both on the product page and in the product summary.

Important Note: Pricing and Taxes Aren’t Affected

One key thing to highlight is that adding this CSS code does not alter your actual product pricing or tax settings—it simply adds characters after the price. You still need to configure your VAT settings within Squarespace correctly.

Ensuring the Right VAT Settings

To ensure everything works as intended, especially when showing "plus VAT," make sure you have the appropriate settings enabled in the tax area.

1. Go to Settings → Selling → Taxes.

2. Choose Add at Checkout to ensure that VAT is added separately during checkout.

Testing the Checkout Process

To confirm it works, let’s walk through the checkout process. Add the product to the basket, and you’ll see the price listed as £75.00. When you move to the checkout page, VAT will be added automatically, confirming that your store is correctly set up to charge VAT at checkout.

Note: If you are still in the process of building your site and you’ve set up the taxes correctly, but it still shows as £0.00 in the checkout summary, you need to make sure you have the shipping details set up. Go to Settings → Selling → Shipping. You only need to add a simple flat rate method in order to test your VAT application.

Final Thoughts

And there you have it! A quick and easy way to display “+ VAT” next to product prices in Squarespace using just a couple of lines of CSS. This solution is clean, simple, and doesn’t require any complex coding or third-party plugins.

---

Need a hand?

If you need some assistance with any of the above, or you want to work with me on anything else, please don’t hesitate to get in touch with me.

---