Cómo añadir una lista de espera para productos agotados a la página de tu producto

Este código sustituirá el botón «Añadir al carrito» por un botón «Avisarme cuando esté disponible» cuando un producto esté agotado.

Puedes configurar el botón «Avisarme cuando esté disponible» para que se abra una ventana emergente con un formulario o para que se abra una página con un formulario en la que se recopilen direcciones de correo electrónico. En cualquier caso, crea una página con un formulario y configura la URL de la página como «sold-out-waitlist».

Si decides utilizar una ventana emergente, disponemos de un estupendo complemento de Lightbox para ello.

<!-- 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 -->