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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

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

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.