How to add a sold out waiting list to your product page

This code will replace the "Add to Cart" button with a "Tell me when available" button when a product is out of stock.

You can setup the "Tell me when available" button to open a lightbox with a form or open a page with a form to collect emails addresses. In any case, create a page with a form and set the page URL to sold-out-waitlist.

If you choose to use a lightbox, we have a great Lightbox Plugin for this.

<!-- Sold Out Waitlist -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<style>
.sold-out-waitlist-button,
.collection-type-products.view-item .sold-out .sqs-add-to-cart-button:first-child,
.collection-type-products.view-item .product-variants[data-selected-variant]:not([data-variant-in-stock])~.sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button:first-child {
  display: none !important;
}
.sold-out .sold-out-waitlist-button,
.product-variants[data-selected-variant]:not([data-variant-in-stock])~.sqs-add-to-cart-button-wrapper .sold-out-waitlist-button {
  display: inline-block !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
</style>
<script>
function soldOutWaitlist() {
  var href = window.pluginLightbox ? '#lightbox>/sold-out-waitlist' : '/sold-out-waitlist';
  var text = 'Tell me when available';
  var cartButton = document.querySelector('.sqs-add-to-cart-button');

  if (cartButton) {
    var button = document.createElement('a');
    button.className = 'sqs-add-to-cart-button sold-out-waitlist-button';
    button.href = href;
    button.textContent = text;
    cartButton.parentNode.appendChild(button);
  }
}
document.addEventListener('DOMContentLoaded', soldOutWaitlist);
window.addEventListener('mercury:load', soldOutWaitlist);
</script>
<!-- end Sold Out Waitlist -->