Modify Add to cart button

Site URL: https://www.liimmi.com/preorder/

Hello!

I have the following two problems and looking for help.

Can I add a link to the Add-to-Cart button to redirect to a page (all 3 product pages to go to the same confirmation page we set up in Squarespace)? Or is there a way to get an id for the Add-to-cart button (when it is out of stock and we just collect sign ups for the waitlist)?

The real problem behind is that we are trying to track the Add-to-cart button clicks because we are taking pre-orders without any purchase. We'd like to say that the Add-to-Cart button click is the conversion event for tracking, but we are unable to identify the button, so we thought of a page maybe that loads saying thank you for signing up for the pre-order waitlist, if there is no way to target the button for tracking.

Thanks a lot!

Try this guide

On 7/18/2022 at 10:27 AM, tuanphan said:

Try this guide

 

Thank you! I have tried to go through all steps, but I might be missing something. It does not redirect to the url (the thank you page). I am trying for all add-to-cart buttons. Could there be an issue that we renamed the button, or that does not affect the code? Thank you!

Quote

the Add-to-cart button is not working at all. Do you think you can help in this problem?

When you turn on the email sign-up when the stock level is zero feature the SS built-in atc button is hidden.

You can use the following CSS to show the button again.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>
  
  .product-details .product-restock-notification:not( [hidden] ) ~ .sqs-add-to-cart-button-wrapper {
  
    display : unset;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

19 hours ago, creedon said:

When you turn on the email sign-up when the stock level is zero feature the SS built-in atc button is hidden.

You can use the following CSS to show the button again.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>
  
  .product-details .product-restock-notification:not( [hidden] ) ~ .sqs-add-to-cart-button-wrapper {
  
    display : unset;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Thank you so much! It is clear now that the button with the waitlist function (stock level zero feature) is not an add-to-cart button, so this is why nothing happened with the url redirect.

And thanks, the code helps to bring back the atc button, and thus the add-to-cart url redirect solution also works fine.

As we need to collect email addresses, at the end we added a Form in the product page Additional Info section (as Lightbox to appear as a button), and played a bit with spacing to have it where the act button would normally be. The button in the form has the possibility to redirect to a given url, which is the thank you page for us, defined as our conversion. If there is a better solution, let me know! Thanks a lot!