How to hide add to cart button in Squarespace 7.1

Squarespace 7.1
Written By Primitus Consultancy

Recently, a client wanted a brochure looking website, however, they wanted the 'add to cart' button removed. This feature will not available in Squarespace, so we have to use some css code to achieve this.

Complexity: Easy

//CSS Hide Add to Cart Button
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {display:none;}

The above code when placed in Design > Custom CSS applies site wide. If you wish to apply the code to a single product, you will need to identify the section id.

A useful tool you can use to identify the #collection-id, #block-id and section[data-section-id="xxxxx"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which I fully recommend.

[data-section-id="6055b328552222411afff759"] {

//CSS Hide Add to Cart Button
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {display:none;}

}
Home Blog
Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous

How to hide price on product pages in Squarespace 7.1
Next

Squarespace SEO keywords?