How to Customize Squarespace: Replace $0.00 Prices with Custom Text and Hide Purchase Buttons

While working on dozens of Squarespace sites over the years, I often see clients needing to display products without a set price. This is common for items requiring a quote or having variable pricing. However, Squarespace's default "$0.00" display can look unprofessional and confuse customers. Today, I will show you a simple yet effective customization to replace that "$0.00" with custom text and hide the purchase button for these items.

The Problem

By default, Squarespace displays "$0.00" for products without a set price and still shows the purchase button. This can lead to a poor user experience and potentially lost sales opportunities.

The Solution

I’ve developed a small JavaScript snippet that accomplishes two things:

1. Replaces the "$0.00" price with custom text (in this case, "Contact Dealer for Price")
2. Hides the purchase button for these items

Let's dive into the code and see how it works.

The Code

Here’s the complete code snippet, available in both jQuery and vanilla JavaScript versions for flexibility:

How It Works

1. Function Definition: The updatePriceToContactDealer function is defined to perform our custom logic.
2. Element Selection: It selects all elements with the class product-price.
3. Price Check: For each element, it checks if the price text is exactly "$0.00".
4. Text Replacement: If true, it replaces the text with "Contact Dealer for Price."
5. Button Hiding: It then looks for the purchase button wrapper and hides it if found.
6. Execution Timing: The function runs when the DOM is fully loaded, ensuring all elements are available for manipulation.

Implementation Steps

1. Go to your Squarespace admin panel.
2. Navigate to Pages > Website Tools > Code Injection.
3. Paste the selected code version (jQuery or vanilla JavaScript) into the Footer section.
4. Save your changes.

Customization Tips

At Rare Digital, we often tailor this solution further for our clients. Here are some tips:

1. Change the Replacement Text: Replace 'Contact Dealer for Price' with your preferred message.
2. Apply to Different Price Points: Modify the condition if (price === '$0.00') to target different prices.
3. Style the Custom Text: Add CSS to style your custom price text differently.

Performance Considerations

This script is lightweight and shouldn’t significantly impact your page load times. However, if you’re concerned about performance:

1. Consider loading the script asynchronously.
2. If you only use this feature on specific pages, load the script on those pages.

Closing Thoughts

With this simple customization, you can provide a much better user experience for free products on your Squarespace site. Clear communication with your customers is key to a great e-commerce site. Replacing "$0.00" with a call-to-action like "Contact Dealer for Price" provides clear next steps for interested customers.

Feel free to experiment with this code and adapt it to your needs. If you need any help implementing this solution or have other Squarespace customization needs, don’t hesitate to reach out on Threads (@zain)