Running a business on Squarespace is often a smooth experience. But what if you need custom pricing or price quotes? Many business owners wonder how they can remove pricing from products on their Squarespace website.
Sometimes, you don’t want to display prices publicly. This might be because you offer services where prices vary. Or, maybe you prefer customers to contact you directly for a personalized quote.
Squarespace offers a few ways to do this, depending on your tech skills and how much control you need. This guide explores various solutions for removing pricing from products on your Squarespace website.
Hide Prices Completely With Squarespace’s Built-In Feature
Squarespace has a simple setting to hide all product prices. This is quick and doesn’t involve code. It’s perfect if you want to remove pricing from every item.
However, this isn’t flexible if you sell standard products and services needing custom quotes. It’s a challenge if prices differ by item, for products versus services.
Here’s how to use Squarespace’s built-in feature for controlling product price visibility. This is helpful for business owners using Squarespace and needing full-service design solutions. This approach uses the website design options built into the platform itself.
Steps to Hide All Prices
- Go to the “Pages” panel in your Squarespace dashboard.
- Select the store page where you want to hide prices.
- Click the gear icon to access page settings.
- Under the “General” tab, scroll down.
- Toggle the “Hide Prices” switch on.
- Click “Save.”
How Can You Remove Pricing From Product on Squarespace for Specific Products Using Tags?
Want to keep some prices visible but hide others? Squarespace’s tagging combined with custom CSS lets you selectively hide prices. Create a tag (like “POA” for “Price On Application”).
Apply this tag to products where you want to hide pricing. Learn more about adding tags to your Squarespace products.
Custom CSS Code
After tagging, add this CSS code to your site’s Custom CSS panel. This Squarespace website technique is more advanced, though it can provide more granular control.
/* Hide prices on Squarespace (replace "POA" with your tag) */
.tag-POA .product-price .sqs-money-native {
display: none;
}
/* Hide add to cart and quantity */
.tag-POA .ProductItem-summary .ProductItem-details {
.sqs-add-to-cart-button-wrapper,
.product-quantity-input {
display: none;
}
}
Test CSS changes in a staging environment first. This hides pricing, the cart button, and the quantity box. This code injection technique helps maintain a professional online presence.
This guides shoppers to contact you. It addresses potential issues with using CSS or tagging, something Squarespace recommends professional help for commercial sites. Consult with a Squarespace expert if needed, such as those found in the Squarespace Circle or Brine Family online groups.
Using Javascript to Modify Pricing Display
For dynamic control, use JavaScript. Checking for a $0.00 price lets you change how these items appear. This method gives you flexibility and control, and a professional online feel.
JavaScript Snippet Example
<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'; // Or any text
}
}
});
</script>
Paste this script into the Footer Code Injection panel in Advanced Settings. You might see “POA,” but change this as needed. Consult resources like SoundFocus Digital for further guidance. A full-service design studio can also help integrate these solutions into your existing web design.
These Javascript techniques address the central question of how to remove pricing, and empower your site’s online presence.
Choosing the Right Approach: A Comparison Table
| Method | Skill Level | Flexibility | Ease of Use |
|---|---|---|---|
| Built-in Hide Price Setting | Beginner | Low (all or nothing) | Very Easy |
| CSS and Tags | Intermediate | Medium (product specific) | Easy |
| JavaScript Modification | Advanced | High (dynamic control) | Moderate |
This table summarizes common pros and cons of each method. Consider the details fully before choosing one. Seek guidance from a full-service design studio for optimal implementation.
Conclusion
Understanding how to remove product pricing on Squarespace might seem complex. However, you have several options: the built-in feature, CSS with tags, or JavaScript.
Choose the method that best fits your needs and skill level. Test any changes thoroughly. For coding help, contact a Squarespace expert for a professional online presence. Consider native Squarespace options or consult professionals like a shop full-service design for a smooth, personalized setup. Remember, optimizing your site is crucial for attracting medium-sized businesses seeking shop full-service design studio assistance. Explore additional support from agencies like us for a professional online experience and enhance your site’s presence. SEO Locale is a full digital marketing agency that handles Squarespace SEO services and web customizations.
