¿Te ha pasado que un cliente llega a tu tienda en línea emocionado por un producto, pero se encuentra con que está agotado? Es una experiencia frustrante tanto para el cliente como para ti como propietario de la tienda. Pero, ¿y si pudieras convertir esa frustración en una oportunidad de fidelizar al cliente y, además, concretar una venta futura?
En este artículo, te mostraré cómo implementar un sistema que permite a tus clientes dejar su correo electrónico para recibir una notificación automática cuando el producto vuelva a estar disponible. Este sistema es ideal para mantener interesados a los clientes, aumentar tus conversiones y ofrecer una experiencia de compra más personalizada. A continuación, te explicaré en detalle qué hace este código y cómo puede ayudarte a mejorar tu tienda WooCommerce.
1. Detecta si un producto está agotado
El primer paso que realiza este código es verificar el estado del producto en tu inventario. Si el sistema detecta que no hay unidades disponibles, muestra un mensaje personalizado en la página del producto. Este mensaje no solo informa al cliente de que el producto está agotado, sino que también lo invita a tomar acción: ingresar su correo electrónico para recibir una notificación cuando el producto vuelva al inventario.
Esta funcionalidad es fundamental porque convierte una situación negativa (producto no disponible) en una oportunidad para mantener la interacción con el cliente. Además, evita que el cliente se vaya con las manos vacías, algo que podría suceder si simplemente viera un mensaje genérico de «Sin stock».
2. Muestra un formulario para que el cliente deje su email
Cuando un cliente visita un producto que está fuera de stock, verá un formulario en la misma página. Este formulario tiene un diseño limpio y profesional, con un campo para ingresar el correo electrónico y un botón que dice “Avisadme”. El formulario también incluye mensajes claros y amigables que explican al cliente exactamente lo que sucederá: recibirán un correo electrónico automáticamente en cuanto el producto esté disponible.
Este pequeño detalle es clave para generar confianza. Cuando el cliente entiende qué va a pasar con su información, es más probable que se anime a dejar su correo. Además, el botón de acción invita a participar, lo que aumenta la tasa de conversión de este sistema.
3. Recoge y guarda los emails de los clientes
Una vez que el cliente introduce su correo electrónico y hace clic en el botón, el sistema lo guarda automáticamente en la base de datos de tu tienda. El código se asegura de que este proceso sea seguro y eficiente.
Primero, el sistema valida que el correo electrónico sea válido. Esto es importante para evitar datos incorrectos o inútiles en tu base de datos. Si el correo es válido, se asocia directamente al producto agotado en cuestión. El código utiliza los metadatos del producto para almacenar los correos electrónicos en una lista específica y organizada.
¿Por qué es importante esta organización? Porque permite que cada producto tenga su propia lista de clientes interesados. Por ejemplo, si tienes dos productos agotados, el sistema separa las listas de correos de manera automática. Esto te asegura que las notificaciones se envíen únicamente a los clientes interesados en cada producto, manteniendo todo limpio y estructurado.
Además, antes de guardar un correo, el sistema verifica si ese correo ya está registrado en la lista del producto. De esta forma, evita duplicados y asegura que cada cliente reciba solo una notificación, incluso si intenta registrarse varias veces.
4. Envía un email automático cuando el producto vuelve al inventario
La verdadera magia de este sistema ocurre cuando el producto vuelve a estar en stock. En ese momento, el código detecta automáticamente el cambio en el inventario y envía un correo electrónico a todos los clientes que se registraron para recibir una notificación.
El correo electrónico no es un mensaje genérico. Está diseñado para ser útil y persuasivo. Incluye:
- El nombre del producto, para que el cliente sepa exactamente qué artículo está disponible.
- La cantidad de unidades disponibles, para añadir un sentido de urgencia y motivar al cliente a actuar rápidamente.
- Un enlace directo al producto en tu tienda, facilitando la compra.
Este tipo de comunicación personalizada es altamente efectiva para convertir a los clientes interesados en compradores reales. Además, te permite mantener una relación positiva con el cliente, incluso después de haber enfrentado la frustración inicial de encontrar el producto agotado.
5. Limpia la lista de correos después de enviar las notificaciones
Una vez que el sistema ha enviado los correos electrónicos, limpia automáticamente la lista de emails asociados al producto. Esto es esencial para mantener tu base de datos organizada y para evitar enviar notificaciones innecesarias.
¿Por qué es importante este paso? Porque garantiza que cada notificación sea relevante y evita que tus clientes reciban correos duplicados o fuera de lugar. Esto no solo mejora la experiencia del cliente, sino que también refuerza la imagen profesional de tu tienda.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
// Agrega un formulario de notificación de email en la ficha del producto agotado
add_action('woocommerce_single_product_summary', function() {
global $product;
// Comprueba si el producto no está en stock
if (!$product->is_in_stock()) {
// Muestra un formulario donde el usuario puede ingresar su email para ser notificado
echo '<div id="notify-me" style="font-family: Arial, sans-serif; max-width: 400px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; border-radius: 10px; background-color: #f9f9f9; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
<h3 style="margin-bottom: 15px; color: #333; text-align: center;">Producto agotado</h3>
<p style="margin-bottom: 15px; text-align: center;">Introduce tu email para ser notificado cuando el producto esté disponible.</p>
<input type="email" id="notify_email" name="notify_email" placeholder="Tu correo electrónico" required style="padding: 10px; width: calc(100% - 22px); margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px;">
<button id="notify_me_button" style="display: block; width: 100%; padding: 10px; background-color: #0073aa; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer;">Avisadme</button>
<p id="notify_message" style="display: none; color: green; margin-top: 15px; text-align: center;">¡Gracias! Te avisaremos cuando el producto esté disponible.</p>
</div>';
?>
<script>
// Lógica JavaScript para gestionar el envío del email al backend
document.getElementById('notify_me_button').addEventListener('click', function(e) {
e.preventDefault();
// Obtiene el email ingresado por el usuario
const email = document.getElementById('notify_email').value;
if (email) {
// Obtiene el ID del producto actual
const productId = <?php echo $product->get_id(); ?>;
// Realiza una petición AJAX para guardar el email
fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
action: 'save_notify_email', // Acción a ejecutar en WordPress
email: email,
product_id: productId
})
}).then(response => response.json()).then(data => {
// Muestra un mensaje de éxito o error según la respuesta
if (data.success) {
document.getElementById('notify_message').style.display = 'block';
} else {
alert(data.message || 'Ocurrió un error. Intenta nuevamente.');
}
}).catch(error => {
alert('Ocurrió un error en la solicitud. Intenta nuevamente.');
});
} else {
alert('Por favor, introduce un correo electrónico válido.');
}
});
</script>
<?php
}
}, 15);
// Maneja la lógica para guardar el email en la base de datos
add_action('wp_ajax_save_notify_email', 'save_notify_email');
add_action('wp_ajax_nopriv_save_notify_email', 'save_notify_email');
function save_notify_email() {
// Sanitiza y valida los datos recibidos
$email = isset($_POST['email']) ? sanitize_email($_POST['email']) : '';
$product_id = isset($_POST['product_id']) ? intval($_POST['product_id']) : 0;
if (!is_email($email) || !$product_id) {
wp_send_json_error(['message' => 'Datos inválidos.']);
}
// Recupera los emails notificados para este producto
$notified_emails = get_post_meta($product_id, '_notify_emails', true);
if (!$notified_emails || !is_array($notified_emails)) {
$notified_emails = [];
}
// Agrega el email si no está ya registrado
if (!in_array($email, $notified_emails)) {
$notified_emails[] = $email;
update_post_meta($product_id, '_notify_emails', $notified_emails);
wp_send_json_success();
} else {
wp_send_json_error(['message' => 'Este correo ya está registrado para notificaciones.']);
}
}
// Envía notificaciones por correo cuando el producto vuelve a estar en stock
add_action('woocommerce_product_set_stock_status', 'send_email_notification_on_stock', 10, 3);
function send_email_notification_on_stock($product_id, $stock_status, $product) {
// Solo ejecuta la acción si el producto vuelve a estar en stock
if ($stock_status === 'instock') {
// Recupera la lista de correos asociados al producto
$notified_emails = get_post_meta($product_id, '_notify_emails', true);
if (!empty($notified_emails) && is_array($notified_emails)) {
$stock_quantity = $product->get_stock_quantity();
$logo_url = 'https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/04/logo-dark.svg';
// Enviar un correo a cada usuario en la lista
foreach ($notified_emails as $email) {
$button = '<a href="' . get_permalink($product_id) . '" style="display: inline-block; padding: 10px 20px; background-color: #0073aa; color: white; text-decoration: none; border-radius: 5px;">Ver Producto</a>';
$message = '<div style="font-family: Arial, sans-serif; line-height: 1.5;">
<img src="' . $logo_url . '" alt="Logo" style="max-width: 150px; margin-bottom: 20px;">
<p>Hola,</p>
<p>Te informamos que el producto que solicitaste, <strong>' . $product->get_name() . '</strong>, ya está disponible en nuestra tienda.</p>
<p>Actualmente hay <strong>' . $stock_quantity . '</strong> unidades disponibles. ¡Date prisa si no quieres quedarte sin él!</p>
<p>Puedes adquirirlo haciendo clic en el siguiente botón:</p>
' . $button . '
<p>Gracias por confiar en nosotros.</p>
<p>Atentamente,</p>
<p>El equipo de nuestra tienda</p>
</div>';
// Envía el correo
wp_mail(
$email,
'Producto disponible: ' . $product->get_name(),
$message,
['Content-Type: text/html; charset=UTF-8']
);
}
// Limpia la lista de correos una vez enviados
delete_post_meta($product_id, '_notify_emails');
}
}
}
Lenguaje del código: PHP (php)Conclusión
Este sistema es mucho más que una simple funcionalidad para notificar a los clientes. Es una herramienta poderosa para mejorar la experiencia de compra, fidelizar a tus clientes y aumentar tus ventas de manera efectiva. Al implementar este código, puedes transformar un problema común —productos agotados— en una oportunidad para mantener la relación con tus clientes y generar nuevas ventas.
¿Te gustaría implementar este sistema en tu tienda WooCommerce o necesitas ayuda con personalizaciones para tu negocio? Estoy aquí para ayudarte.
Contáctame por WhatsApp para servicios de desarrollo personalizado, ajustes en tu tienda online o cualquier solución a medida que necesites.
➡️Haz clic aquí para contactarme por WhatsApp
Hablemos y trabajemos juntos para que tu tienda sea más efectiva y atractiva para tus clientes.
Nos vemos en el siguiente tutorial.
Un saludo.
Deja tus opiniones o dudas en los comentarios.