Brine: How can I make some prices POA?

If you don’t want your prices to appear on your website, Squarespace have added an option in the Style Editor that allows you to hide them.

However, this hides all prices, site-wide. If you only want to hide some of the prices, you need a custom solution using some CSS or some JavaScript.

Here are two solutions I put together for the Brine template. They are completely separate so you only need to use one or the other.

1. A JavaScript Solution

This solution makes prices appear as POA (Price on Application) when you set the price of the product to 0.00. When this script is added to the Code Injection Header box (in the Advanced Settings panel), all 0.00 prices will appear as POA instead.

  /* Brine: Change 0.00 prices to POA */
window.Squarespace.onInitialize(Y, function(){
  var products = document.querySelectorAll('.ProductItem, .ProductList-item'), i, len = products.length;
  for (i=0; i<len; i++) {
    var price = products[i].querySelector('.sqs-money-native');
    if (price.textContent === '0.00') {
      price.parentNode.textContent = 'POA';  

You can do this on the Bedford (Anya, Bryant, and Hayden) template too, by replacing line 3 with this:

var products = document.querySelectorAll('.product-price'), i, len = products.length;

2. A Custom CSS Solution

This alternative solution uses CSS and the tags feature built into Squarespace. If you want a product to appear as POA (Price on Application), 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 Brine template - by Soundfocus */
.tag-poa .ProductItem-summary .ProductItem-details .product-price:before {
  content: 'POA'; /* Use your wording here */

/* Hide the price */
.tag-poa .ProductItem-summary .ProductItem-details .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;

Please note that we provide the code above to show how Squarespace can be customised. These are only examples; they don’t take account of real world situations, for example, the use of product variants. 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.

SF DigitalJavaScript, Prices