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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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  ↘️

 

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
  • 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?

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
  • 1 year later...
18 minutes ago, Hansha said:

Anyone aware of the way how to change the text displaying during and after adding to the cart?

Please see the following.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thank you Creedon!

I installed your plugin as instructed on the Github, however I fail to find (or understand) what to do next / how to change the parameters (text) of the "add to cart" button and the "adding", "addeed" text.

Could you point me to some instruction please?

Best regards,

Rene

Link to comment
12 hours ago, Hansha said:

Could you point me to some instruction please?

Settings are in the code. If you scan through the code you will find the lines for changing the adding, added and etc. text.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.