Jump to content

Customising the Add to Cart button

Recommended Posts

Site URL: https://createandempower.com/fashion-dream-job-online-course

Hi

I've  got a sales page with 3 'add to cart' buttons appearing at different sections in the page as you scroll through. All three buttons link to the same product. I have express checkout switched on so clicking on any of these takes the customer straight to checkout.

Is there any way to change the text on each of the buttons while keeping them linked to the same product (and same inventory)?

For example, I'd like the first button to say 'I already know I want to sign up' , the second button to say 'I'm ready! Take me to the checkout page.' and the final button to say 'I'm in!'

Is this possible? How?

Thank you!

Link to comment
  • Replies 5
  • Views 555
  • Created
  • Last Reply

Hi, I'd really appreciate help on this please!

I've  got a sales page with 3 'add to cart' buttons appearing at different sections in the page as you scroll through. All three buttons link to the same product. I have express checkout switched on so clicking on any of these takes the customer straight to checkout.

Is there any way to change the text on each of the buttons while keeping them linked to the same product (and same inventory)?

For example, I'd like the first button to say 'I already know I want to sign up' , the second button to say 'I'm ready! Take me to the checkout page.' and the final button to say 'I'm in!'

Is this possible? How?

Here's the link:

https://createandempower.com/fashion-dream-job-online-course

Thank you!

Link to comment

The following uses Javascript and jQuery. Add the following to Settings > Advanced > Code Injection > HEADER.

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

Add the following to Page Settings > Advanced > PAGE HEADER CODE INJECTION.

<script>

  $( ( ) => {
  
    let buttonsNames = [
    
      /*
      
      need to use a single quote in the button name?
      be sure to proceed the single quote with a backslash
      
      */
      
      'I already know I want to sign up.',
      'I\'m ready! Take me to the checkout page.',
      'I\'m in!'
      
      ];
      
    $( '.sqs-add-to-cart-button-inner' ).each ( ( index, value ) => {
    
      $( value ).text ( buttonsNames [ index ] );
      
      } );
      
    } );
    
  </script>

Change the button names to suite your needs. This script loops through all the product block add to cart buttons on a page and changes their names. One advantage to this approach is that you don't have to customize the add to cart button text on a product item in the store.

Let us know how it goes.

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

Archived

This topic is now archived and is closed to further replies.


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