(Squarespace) Replace Add to Cart with Custom Button

Pro Tips Other Tips
1

I will share some steps to replace Add to Cart button with Custom Button on Product Detail Page.
It’s quite useful when you want to insert a button to an external shop, or doing an affiliate shop.

Option 1. Do this for all products, each product will have a different button url
First, in Product Additional Info > You add a Button Block
Next, use this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('section.ProductItem-additional .button-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>
<style>
div.sqs-add-to-cart-button {
    display: none !important;
}
div.sqs-add-to-cart-button-wrapper .button-block * {
   opacity: 1 !important;
}
</style>

Option 2. Do this for specific product
Similar option 1, but you add a Button Block, then add a Code Block to Additional Info, then use same code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('section.ProductItem-additional .button-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>
<style>
div.sqs-add-to-cart-button {
    display: none !important;
}
div.sqs-add-to-cart-button-wrapper .button-block * {
   opacity: 1 !important;
}
</style>

Option 3. Do this for all products, but all use same button url
You can edit your Site Footer > Add a Button Block > Then use this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('footer.sections .button-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>
<style>
div.sqs-add-to-cart-button {
    display: none !important;
}
div.sqs-add-to-cart-button-wrapper .button-block * {
   opacity: 1 !important;
}
</style>

Next, add this code to Website Tools > Custom CSS

footer.sections div.button-block {
	display: none !important;
}
body[class*="type-products"] .sqs-add-to-cart-button-wrapper .button-block {
	display: block !important;
}

If you have any problems, just comment below.
Or if you find it difficult to apply, you can message me, I can install it for you.

4 Likes
2

Thank you for this solution (#3). The new custom button now appears on all product pages but it doesn’t replace the original it adds the new button under the “Add to Cart” button.

add to cart
add to cart361×226 8.75 KB

How can I remove the original button?
The site is on 7.1

1 Like
3

@user1904 Recently SS added some options to change the position of elements in Product Detail, so maybe some core code will override the above code.
If you share link to a product on your site, I can check problem easier.

1 Like
4

Thank you for checking this out. Now for some reason the new button disappeared?!

Here is a product page: Main Rotor Blade — Cockell Aviation

5

@user1904 The code will move button from Site Footer. It looks like you removed button block from Footer. Can you check again?

And to remove Add to Cart, use this extra code to Code Injection Footer

<style>
div.product-details .sqs-add-to-cart-button-wrapper div.sqs-add-to-cart-button {
    display: none !important;
}
</style>
1 Like
6

Thank you, that last bit of code did the trick! Exactly what I needed. Your help is much appreciated.
(and yes someone had removed the button in the footer thinking it was broken)

7

Thank you for your books
I wonder where you found my buymeacoffee link, I don’t remember posting it here. :joy:

8

Saw it on the Squarespace forum site I think, you are everywhere! Let me know if you have a preferred way to receive tips,

Thanks again for the help!

Bruno

9

Thank you!