(Squarespace) Replace Add to Cart with Custom Button

Squarespace 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

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

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.

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>
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!

10

HI there Tuan, Do you have some code that is specific for a tag/category to hide the Add to Cart Button and replace with a button that goes to a member area login?

11

All products belong specific tag/category will have same button url or different button url?

12

Hi there all have same url as products are behind members area.

13

You can use Option 3
If you use Product Older version

  1. First, create a tag with name: membership
  2. Next, assign it to products
  3. Next, add a button block to Footer with link to page in member area
  4. Next, use this code to Footer Injection
<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('.tag-membership .sqs-add-to-cart-button-wrapper');
})
</script>
<style>
.tag-membership div.sqs-add-to-cart-button {
    display: none !important;
}
.tag-membership div.sqs-add-to-cart-button-wrapper .button-block * {
   opacity: 1 !important;
}
footer.sections .button-block {display: none;}
</style>

If you use Product V2, you can do 1, 2, 3 then share link to a product, I can check easier because V2 changed ID of products

14

Thanks Tuan

Really appreciate your help

Trying to do something like these:

Here are some examples:
https://specialistclinicpharmacy.com.au/collections/metagenics
https://www.naturalchemist.com.au/designs_for_health

Where they need to log in to view/ purchase however I need the products publically available to get picked up in search engines.

Any ideas?

15

So you want to hide add to cart button, and when they login >> will make add to cart button visible?

16

Yes once logged in they can then purchase.

17

Like this example?
https://tuanphan-demo.squarespace.com/store01?noredirect
pass: abc

test account

18

Sort of. The button is correct however when I click on it it doesn’t prompt to login just goes straight to add to cart

19

So you want to click text, it will show a login popup similar click login in header?

20

Yes like that then once logged in your in the product detail page and can add to cart