Jump to content

Change link of add to cart button

Recommended Posts

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.

Link to comment

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  🙂

 

Edited by codeandtonic

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 2 weeks later...
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.

Link to comment
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  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
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;
}

 

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 1 year later...
  • 4 months later...

Hi!

I was wondering if I could get your help removing the add to cart button on certain items on my website, and other items changing it to a link. I'm an artist and I'd like to show some work that is not for sale, as well as have listings for other items that are for sale through another site where I can link to where someone can buy them. 

Here's a product I want to remove the "add to cart" button:
https://sarahschools.com/fine-art/p/sullivans-18

Here's a product I want to link somewhere else:
https://sarahschools.com/fine-art/p/marie-me-oil-pastel
And I want it to link to: https://shopdocent.com/pages/sarah-alexander-schools


Thank you so much for the help!!! 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.