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.

<script>
  // 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';  
    }
  }
});
</script>

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'; //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;
  }
}