(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.

2 Likes