Hide or Replace Add to Cart Button With Custom Link
Most ecommerce websites need an add to cart button on product pages. But not all of them.
Sometimes you may want to hide the add to cart button or replace it with a custom link. If you want to do that you’ll need to add some custom code. It’s a little complex, but I’ll talk you through it…
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
Head to your product page and hover over Edit, select Edit Product.
In the description box you want to create your custom button/link, the one that will replace the add to cart option.
Simply add the text that you want to be clickable and make it a link, adding the URL.
Next select the Additional Info section of the Edit Product dashboard and add a code block
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
You then need to paste in the following code if you want to add a button but ALSO KEEP the add to cart button:
<style>
.tweak-product-basic-item-description-position-below-price .ProductItem-details .ProductItem-details-excerpt-below-price a {
text-decoration: none;
transition: 0.3s;
padding: 10px 20px;
line-height: 45px !important;
background: black !important;
color: white !important;
&:hover {
opacity: 0.7;
}
}
</style>
If you want to have your new button but HIDE the standard Squarespace add to cart button, use the below code instead:
<style>
.tweak-product-basic-item-add-to-cart-standalone .ProductItem .ProductItem-quantity-add-to-cart {
display: none;
}
.tweak-product-basic-item-description-position-below-price .ProductItem-details .ProductItem-details-excerpt-below-price a {
text-decoration: none;
transition: 0.3s;
padding: 10px 20px;
line-height: 45px !important;
background: black !important;
color: white !important;
&:hover {
opacity: 0.7;
}
}
</style>
You can then duplicate the product listing for all of your products. If there are any where you DO want the add to cart button to appear, simply remove the code block from that listing. Simple.
Hopefully you found this useful, the code can look a little daunting but luckily for you I’ve figured it all out so you don’t have to.
