Customising the Add to Cart button

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!

I think it would not be hard to do what you want. Please provide your site-wide password so that we can take a look at your issue.

Hi, I've enabled the page now (no password needed) - please let me know how to do this! Thank you. 

Here's the link:

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

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!

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.

Works  perfectly, thank you!