How can I make some prices POA on Squarespace 7.0?

Squarespace price formatting update 23 August 2022

This guide was written in 2018. Please note that code in this guide no longer works following a Squarespace update on 23 August 2022.

If you don’t want your prices to appear on your website, Squarespace have added an option that allows you to hide all prices. However, this isn’t useful if you only want to hide some of the prices. For this, you need a code extension. Here are two simplified examples that demonstrate how to do this. There’s a Squarespace 7.1 solution here.

---

JavaScript alternative

If you are on a Business or Commerce plan, here’s a JavaScript alternative that will automatically convert 0.00 prices to POA (Price on Application) or your choice of wording. Add the correct script below to Settings > Advanced > Code Injection > Footer. This has been tested on the Brine family, Bedford family (Anya, Bryant, and Hayden) and Five template.

<!--- Change 0.00 prices to POA on Squarespace 7.0 -------------->
<!--- Copyright Soundfocus Digital [sf.digital] ----------------->
<!--- Use freely in your code injection. Do NOT re-publish ------>
<script>
window.Squarespace.onInitialize(Y, function(){
  var products = document.querySelectorAll('.product-price'), sf, len = products.length;
  for (sf=0; sf<len; sf++) {
    var price = products[sf].querySelector('.sqs-money-native');
    if (price.textContent === '0.00') {
      price.parentNode.textContent = 'POA';  
    }
  }
});
</script>

Custom CSS

If you are on a Squarespace Personal Plan, you won’t be able to use the JavaScript solution above, because the Personal plan does not support this.

The solution below uses CSS to exploit the tags feature that is built into Squarespace. If you want a product to appear as POA (Price on Application), you just add a tag to the product called ‘POA’. Then add the CSS below to your site’s Custom CSS panel.

The first section adds an alternative phrase instead of the price. You can choose any wording you like instead of POA by changing line 3.

The second section hides the price.

The third section is optional, but improves the user’s experience. It hides the Add to Cart button and the quantity selector because these aren’t required if the price is hidden.

/* Hide prices on Squarespace Brine template - by Soundfocus Digital */
.tag-poa .product-price:before {
  content: 'POA'; /* Use your wording here */
}

/* Hide the price */
.tag-poa .product-price .sqs-money-native {
  display: none;
}

/* Hide the add-to-cart button */
.tag-poa .ProductItem-summary .ProductItem-details {
  .sqs-add-to-cart-button-wrapper, .product-quantity-input {
  display: none;
  }
}



article.tag-poa > .ProductItem-summary .product-price {
  display:none;
}
// PLP
.ProductList-item.tag-poa > .ProductList-overlay .product-price {
  display:none;
}

Important

The code extensions provided in our guides are only examples to show how Squarespace can be customised; they don’t take account of real world situations and they are not supported. We strongly recommend that you hire a developer to help you with a production website that you use for business purposes. We don’t recommend the use of any code ‘snippets’ that you find online.