Change 'Add to Cart' button

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

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

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>

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

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.

On 9/23/2020 at 12:23 AM, tuanphan said:

Can you share site url? We can check easier.

Sorry just saw now. Thans for coming back. Please find below the example url for a product page:

https://www.delicario.com/oil-vinegar/p/olive-gregori-extra-virgin-olive-oil-single-variety-of-ascolana-tenera

@alexscasny I see that the button says “Add to Basket” and I see that it’s still the shopping cart icon, and this can get a bit confusing. So do you want the shopping cart icon to be changed to a basket? Thanks!

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.

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.

7 hours ago, inunzi said:

@alexscasny I see that the button says “Add to Basket” and I see that it’s still the shopping cart icon, and this can get a bit confusing. So do you want the shopping cart icon to be changed to a basket? Thanks!

Ideally yes, but not a priority. I guess this can only done with a code

7 hours ago, alexscasny said:

Ideally yes, but not a priority. I guess this can only done with a code

Would you want the code to do so? Thanks!

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/

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>

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

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

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.

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? 

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?