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 👇

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.

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>

---

📩 Join the inner circle to get exclusive code updates

---

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.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?