Jump to content

Change text of a specific button on Product Page 7.1

Recommended Posts

Site URL: https://www.teamshakeitup.com.au/shop

Hey all!

 

I need to change the text of 2 specific buttons on my shop page, I'll add images here to make it easier to understand:

On the attached screenshot, I need the button label of the Game Changer & We got this packs to say: "Choose Flavour" instead of "Add to Cart". All the other products should remain the same. 

 

Also, this is what's on my Code Injection Footer (if this helps at all):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
  .products .grid-item {
    padding-bottom: 80px;
    width: 100% !important;
    
  }
  .products .grid-item .sqs-add-to-cart-button {
    position: absolute;
    z-index: 9999;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    min-width: 200px;
    margin: auto;
    font-family: 'cera-pro-regular';
  }
  
  .products .grid-item .sqs-add-to-cart-button:hover {
   font-family: 'cera-pro-black-italic'; 
  }
  


  
</style>

<script>
  $(".products .grid-item").each(function(e){
    $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-original-label="Add to Cart"><div class="sqs-add-to-cart-button-inner">Add to Cart</div></div>');
  });
  $(function() {
    $(".products .grid-item").each(function(e){
      var dataItemId = $(this).attr('data-item-id');
      $(this).find('.sqs-add-to-cart-button').attr('data-item-id', dataItemId);
    });
  });
</script>

 

Any help is appreciated!

 

Thank you heaps!362377292_ScreenShot2022-01-21at12_19_51pm.thumb.png.e7661a8c51c89ddccd16c273d1875f19.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

9 hours ago, Amanduarte said:

I need to change the text of 2 specific buttons on my shop page

You can change the wording of the Add to Cart button for specific products by editing those products. Whilst editing the product, scroll down to the Checkout section and look for the Customize Button option.

change-add-to-cart-button-label.gif.a3ad5fc0a6c05a931127da6fe71f7d5d.gif

Did this help you today? Please provide feedback by clicking a 'Like' or 'Thanks' icon 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
Quote

You can change the wording of the Add to Cart button for specific products by editing those products. Whilst editing the product, scroll down to the Checkout section and look for the Customize Button option.

Ok, so.. I'm attaching 2 screenshots here so we can better understand the situation.. There's the Shop Page (which shows all products, and each have its price + name + button), and then when we click on one of the products we go to the Checkout Page (where there's a description and additional information of the product)... 

 

If I proceed to do the way you said, the only button changing is in the Checkout Page (the button says (Choose Flavour), so it doesn't help me, because I need it in the Shop Page instead... Makes sense? Sorry if I'm not explaining better...

 

Now, squarespace doesn't add a button on the shop page at all.. I've added it through coding (that's why I included the footer injection here).. So what I need in fact is someone to help me with the coding bit..

Thank you again for taking the time to answer! 

 

Shop page.png

Check out page.png

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.