Jump to content

Change 'Add to Cart' button

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://thecupncake.squarespace.com/

Hi there, 

I want to change my 'add to cart' button to 'Order now' and for a click on the button to redirect to my order form and not the checkout page (I have a personal plan)

Is there a way I can repurpose the 'add to cart' button or add in another button with that functionality under all my products?

Site: thecupncake.com

Password: password

 

Thanks in advance :)

Link to comment
  • 3 months later...
1 hour ago, carpetscc said:

Hey - I see from your website you found a solution - I was just wondering if you could share it with me as I need to do a similar thing on my website. Many thanks

They removed add to cart & add new order button with this code (Add to Home > Settings > Advanced > Code Injection > Header)

<style>
  .sqs-add-to-cart-button-wrapper {
    display: none !important;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
   $(function() {
     $("<a class='checkoutbutton' href='/order'>ORDER THIS CAKE</a>").insertAfter(".sqs-add-to-cart-button-wrapper");        
   });
</script>

 

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
  • 3 weeks later...
On 9/2/2020 at 10:15 AM, tuanphan said:

They removed add to cart & add new order button with this code (Add to Home > Settings > Advanced > Code Injection > Header)


<style>
  .sqs-add-to-cart-button-wrapper {
    display: none !important;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
   $(function() {
     $("<a class='checkoutbutton' href='/order'>ORDER THIS CAKE</a>").insertAfter(".sqs-add-to-cart-button-wrapper");        
   });
</script>

 

Hi there,

i used this code as well to change "Add to cart" to a different text, but now the button style disappears and the button is only regular text. Is there a reason why there is no button anymore? Many thanks

Link to comment
13 hours ago, alexscasny said:

Hi there,

i used this code as well to change "Add to cart" to a different text, but now the button style disappears and the button is only regular text. Is there a reason why there is no button anymore? Many thanks

Can you share site url? We can check 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
  • Solution
On 9/22/2020 at 10:51 AM, alexscasny said:

i used this code as well to change "Add to cart" to a different text

You don’t need code to change the label on the ‘Add to Cart’ button. You can change this text by editing the product.

You'll find the setting in the Checkout section of the product options. Look for Custom Button and then toggle Enable Custom label and enter your preferred text.

image.thumb.gif.f8a9f47b6344d41314f504dfc1288059.gif

For more information, see this help article.

Edited by paul2009
Updated for Product Composer 2.0

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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.

Buy me a coffee

Link to comment
24 minutes ago, paul2009 said:

You don’t need code to change the label on the ‘Add to Cart’ button. You can change this text in the Options tab by checking Use Custom Add Button Label and entering new text.

image.png.a023901d794abb25dc77b078ef642062.png

For more information, see this help article.

 

Thank you, did this for all the products. Just thought there might be a code to change this overall. But the settigns work fine as well.

Link to comment
  • 2 weeks later...
On 9/2/2020 at 5:15 AM, tuanphan said:

They removed add to cart & add new order button with this code (Add to Home > Settings > Advanced > Code Injection > Header)


<style>
  .sqs-add-to-cart-button-wrapper {
    display: none !important;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
   $(function() {
     $("<a class='checkoutbutton' href='/order'>ORDER THIS CAKE</a>").insertAfter(".sqs-add-to-cart-button-wrapper");        
   });
</script>

 

I have Express Checkout enabled and I'm trying to use this code to change the "Purchase" button to say "Sponsor". It doesn't seem to be working. I have the code in place now:

Here's the live site: https://firstpreshart.org/angel-tree/child-017

If anyone can help me change the "Purchase" text to "Sponsor," I'd be very appreciative.

I also tried using the following, but that isn't working work either. This code is currently disabled on the live site.

<script>
  // Purchase button Text
  document.querySelectorAll(‘.sqs-add-to-cart-button-inner’).forEach(function(b){
b.innerHTML = Sponsor
});
</script>

Source: https://heathertovey.com/blog/change-default-text-labels/

Link to comment
1 minute ago, caseyh said:

I have Express Checkout enabled and I'm trying to use this code to change the "Purchase" button to say "Sponsor". It doesn't seem to be working. I have the code in place now:

Here's the live site: https://firstpreshart.org/angel-tree/child-017

If anyone can help me change the "Purchase" text to "Sponsor," I'd be very appreciative.

I also tried using the following, but that isn't working work either. This code is currently disabled on the live site.


<script>
  // Purchase button Text
  document.querySelectorAll(‘.sqs-add-to-cart-button-inner’).forEach(function(b){
b.innerHTML = Sponsor
});
</script>

Source: https://heathertovey.com/blog/change-default-text-labels/

Your code has invalid character ' & ''

Try this code

<script>
  // Purchase button Text
  document.querySelectorAll('.sqs-add-to-cart-button-inner').forEach(function(b){
b.innerHTML = "Sponsor"
});
</script>

 

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
5 minutes ago, caseyh said:

I have Express Checkout enabled and I'm trying to use this code to change the "Purchase" button to say "Sponsor". It doesn't seem to be working. I have the code in place now:

Here's the live site: https://firstpreshart.org/angel-tree/child-017

If anyone can help me change the "Purchase" text to "Sponsor," I'd be very appreciative.

I also tried using the following, but that isn't working work either. This code is currently disabled on the live site.



<script>
  // Purchase button Text
  document.querySelectorAll(‘.sqs-add-to-cart-button-inner’).forEach(function(b){
b.innerHTML = Sponsor
});
</script>

Source: https://heathertovey.com/blog/change-default-text-labels/

Aha! I found a slightly different solution on Stack Overflow that seems to be working for now:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
   $(document).ready(function() {
  $(".sqs-add-to-cart-button-inner").text("Sponsor");
});
</script>

Source: https://stackoverflow.com/questions/42396019/not-possible-to-change-button-text-via-jquery

Edited by caseyh
Link to comment
12 minutes ago, caseyh said:

I have Express Checkout enabled and I'm trying to use this code to change the "Purchase" button to say "Sponsor". It doesn't seem to be working.

FYI, you don't need code to change "Purchase" to "Sponsor". There's a built in feature where you can change the label and it works when Express Checkout is enabled. See my post above (linked below) for further information.

   If a post helps you, please click a "Like" option below  ↘️

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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.

Buy me a coffee

Link to comment
  • 1 year later...
On 9/28/2020 at 1:53 AM, paul2009 said:

You don’t need code to change the label on the ‘Add to Cart’ button. You can change this text in the Options tab by checking Use Custom Add Button Label and entering new text.

image.png.a023901d794abb25dc77b078ef642062.png

For more information, see this help article.

 

Paul, 

 

Sorry to bump an old thread. Any clue if you're able to do this to ALL products at once rather than just one-by-one? 

Link to comment
1 hour ago, Jaybaumphoto said:

Any clue if you're able to do this to ALL products at once rather than just one-by-one? 

There isn't a site wide setting. It must be configured on an individual product basis.

It would be possible to change the label with custom code but I wouldn't recommend this unless there are good reasons to do so - primarily because if Squarespace change something, your custom code could break. Can you help me to understand why you want to change for all products?

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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.

Buy me a coffee

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.