Change link of add to cart button

Hello -

I would like to change what happens when visitors click the "Add to Cart' button on my product pages.

I know there is an option in the product editor to just change the text of the button, but instead of just changing the text, I would like to make it so that when someone clicks the button, it takes them to the Contact page (instead of adding the product to the cart).

Is this possible?

Thank you very much.

Hi. This is possible. For all products or specific product? Can you share link to a product? We can help easier.

Thank you Tuan - I've just sent you a forum message with the details

Add to code injection header

<!-- jQuery 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
  //ADD CONTACT PAGE URL HERE ⬇️⬇️⬇️
var contactPageUrl = "/contact";
//ADD CONTACT PAGE URL HERE ⬆️⬆️⬆️
  
$( document ).ready(function() {
  $(".sqs-add-to-cart-button").click(function(){
    event.preventDefault();
    window.location.href = contactPageUrl;
  })
}); 

</script>

And feel free to get in touch if you need to hire a pro  🙂

On 2/5/2022 at 1:27 PM, codeandtonic said:

Add to code injection header

<!-- jQuery 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
  //ADD CONTACT PAGE URL HERE ⬇️⬇️⬇️
var contactPageUrl = "/contact";
//ADD CONTACT PAGE URL HERE ⬆️⬆️⬆️
  
$( document ).ready(function() {
  $(".sqs-add-to-cart-button").click(function(){
    event.preventDefault();
    window.location.href = contactPageUrl;
  })
}); 

</script>

 

And feel free to get in touch if you need to hire a pro  🙂

 

Hi codeandtonic - thank you for your reply but I think that I am unable to make this change (I am on the most basic squarespace plan). 

Is there another option to achieve what I'm looking for? Thank you.

On 1/28/2022 at 5:56 AM, bluecrown77 said:

I would like to make it so that when someone clicks the [Add to Cart] button, it takes them to the Contact page. 

On the Personal Plan you cannot change the Add to Cart button but you can do the following:

• Add some Custom CSS to hide the Add to Cart button.
• Within the product description, add a link for the contact page.
• Add some further CSS to style the link to look like an Add to Cart button.

As you didn't include a link to your site in your question I wasn't able to provide you with the exact details but this should get you started.

Did this help? Please give feedback by clicking an icon below  ⬇️

On 2/19/2022 at 9:27 PM, bluecrown77 said:

Is there another option to achieve what I'm looking for? Thank you.

Paul2009 gave a nice answer. With CSS you'd need to be really creative. I'd suggest paying for a better plan if it's possible. 

But the best you can do is add a button block, Add to Cart as title and link as the destination. Then custom CSS to hide the real add to cart button

.ProductItem-details .sqs-add-to-cart-button-wrapper {
  display: none !important;
}

Hi @codeandtonic

Thanks for the above - I've given it a shot and although the script does redirect to the contact page, it looks like the default action of attempting to add the product to the cart still gets triggered. Any chance you could take a look for me?

https://tarpon-glockenspiel-p4x5.squarespace.com/shop/p/lawrence-jacket-zczh9
password: barnfield

Thanks!

Mark