Changing price formatting in Squarespace

A Business or Commerce Plan is required

This guide has been updated in response the the updates that Squarespace made to sites on 23 August 2022. It now uses JavaScript instead of CSS and is therefore supported on Squarespace Business and Commerce plans only; it will not work on Personal Plans.

This guide explains how to change the formatting of prices on Squarespace 7.1 websites. For example you may want to change the currency symbol, add a currency code (like USD or GBP), remove the decimal fraction (those trailing zeroes!) or add some text after the price to show that some products are sold by the metre or by the square metre. I’ve covered a number of these examples in this guide using the same basic code. Note that these are basic examples that are designed to work with products that don’t have variants. You’ll need some additional code if your products have variants, because the price format will change when any variant option is selected/deselected. If you require something more advanced, I recommend that you book a developer who was hand-selected by the Squarespace Marketplace team to be a Squarespace Expert.

Changing the currency symbol

When you build an online store with Squarespace you can choose from a range of popular currencies, but it cannot support every currency! Some less popular currencies are not supported. This means that if you want to display prices in Nigerian Naira, Mexican Pesos, or the West African CFA Franc, you’ll need some code to show a different currency symbol. It’s important to point out that code can only change the symbol that is shown on the product page. It is not possible to accept payments in unsupported currencies; it is a visual change only! You’ll need to process your payments via another method because you won’t be able to integrate a third party payment API with Squarespace Commerce.

Installing the JavaScript

1. The first step is to go to Commerce > Payments > Store Currency and set the store currency to British Pounds Sterling (GBP) or Euro (EUR).

2. Next, view one of your store pages in the preview pane so that you can see some prices.

3. Go to Settings > Advanced > Code Injection. You should see a number of panels including - HEADER, FOOTER, LOCK PAGE and ORDER CONFIRMATION PAGE.

3. Scroll down to the FOOTER panel and paste in the following code:

<!--- Change currency symbol on Squarespace 7.1 ----------------->
<!--- Copyright Soundfocus Digital [sf.digital] ----------------->
<!--- Use freely in your code injection. Do NOT re-publish ------>
<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    var products = document.querySelectorAll('.product-price'), sf;
    for (sf=0; sf<products.length; sf++) {
      products[sf].innerHTML = products[sf].innerHTML.replace(/[\£\€]/g,"") + "";
    }
  });
</script>

4. After pasting the code, click SAVE to save the changes. If the currency symbol disappears from your prices, it is working!

Choosing the currency symbol

5. To show a different currency symbol in front of the price, you’ll need to add the required symbol in between the first set of empty quote marks. For example, to show the Nigerian Naira symbol (₦), you’d edit line 8 to look like this:

      products[sf].innerHTML = products[sf].innerHTML.replace(/[\£\€]/g,"₦") + "";

Adding a currency code after the price

6. If you would prefer to show a currency code after the digits, you can skip step 5 and add the required currency code between the second set of empty quote marks on line 8. For example, to add the currency code XOF for the West African CFA Franc you may want to use the following:

      products[sf].innerHTML = products[sf].innerHTML.replace(/[\£\€]/g,"") + "XOF";      

Don’t forget to save your additional changes.

Removing the decimal fraction

If you want to remove the decimal fraction - the .00 or the ,00 - you can do this with an additional line of code. Add this additional line of code just below line 8:

      products[sf].innerHTML = products[sf].innerHTML.replace(/,00/,"");

or

      products[sf].innerHTML = products[sf].innerHTML.replace(/.00/,"");

Note that you’ll need to use the version with ,00 or .00 to match the formatting of your currency.

Showing the price per metre or kilogram

If you sell fabric by the linear metre, or coffee by the kilogram, then you may be asking how can I show prices this way? This is also something that you can do with the same code! Having said this, you probably don’t want “per kilo” to be shown on every product. For example, a coffee shop may sell coffee by the kilo, but it would be strange if their travel mugs were sold by the kilo too! Here’s some code you can use to add the required text to products that you’ve tagged. If you aren’t sure how to add a tag to a product, please read this Squarespace guide. For example, if you add a tag called ‘square’ to products that are priced by the square metre, you should be able to show these prices with the suffix ‘per square metre’ using the following code.

As explained in the previous section, it’s best to start by viewing one of your store pages in the preview pane so that you can see some prices.

The next step is to navigate to Settings > Advanced > Code Injection. and then add the following code to the FOOTER panel.

<!--- Add per unit pricing on Squarespace 7.1 ----------------->
<!--- Copyright Soundfocus Digital [sf.digital] ----------------->
<!--- Use freely in your code injection. Do NOT re-publish ------>
<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    var products = document.querySelectorAll('.grid-item.tag-square .product-price, .tag-square .pdp-details-price .product-price'), sf;
    for (sf=0; sf<products.length; sf++) {
      products[sf].innerHTML = products[sf].innerHTML.replace(/[\£\€]/g,"") + " per square metre";
    }
  });
</script>

As you’ll see, this code refers to .tag-square in two separate places. If you are using a tag called square, this is the correct code. If you want to use a different tag, you must change each instance of .tag-square to .tag- followed by the name of your tag. For example, if your tag is called linear (for linear metre) then you’d use .tag-linear instead and if your tag is called kilo, you’d use .tag-kilo instead, and so on.

The spacing is very important, so take care not to remove or add spaces in the code when you are changing the name of tags.

It is possible to chain the code so that several products with different tags can be labelled in different ways.