✅Crea Urgencia con estos Avisos de Stock para WooCommerce

En el mundo del comercio electrónico, la psicología detrás de la toma de decisiones juega un papel fundamental. Uno de los principios más efectivos es crear una sensación de urgencia para motivar la acción inmediata. ¿Qué mejor manera de hacerlo que con avisos personalizados sobre la disponibilidad del stock en tu tienda WooCommerce?

Este artículo explora un fragmento de código diseñado para transformar la forma en que tu tienda comunica la disponibilidad de productos, empleando un estilo visual atractivo y dinámico que captura la atención de tus clientes y los motiva a actuar rápido. Desde avisos verdes que indican abundancia hasta alarmas rojas que advierten sobre el inminente agotamiento, este enfoque mejorará significativamente la experiencia del usuario y tus tasas de conversión.

Explicación paso a paso del código

A continuación, desglosamos cada función del código para que entiendas exactamente cómo implementar y personalizar esta funcionalidad en tu tienda WooCommerce.

1. Hook para agregar estilos personalizados al aviso de stock

• Función involucrada: add_action('wp_head', 'agregar_estilos_mensaje_stock');

Este hook asegura que los estilos CSS necesarios para los avisos de stock se carguen en el encabezado de tu sitio web. Así, el diseño de los mensajes será consistente y atractivo en todas las páginas de tu tienda.

2. Definición de los estilos CSS

• Función involucrada: agregar_estilos_mensaje_stock

Esta función utiliza la etiqueta <style> para insertar directamente el código CSS que define el diseño de los mensajes de stock. Incluye características como:

• Colores personalizados: Verde para disponibilidad alta, naranja para baja, y rojo para escasez.
• Efectos visuales: Sombra, transición al hacer hover y bordes destacados que captan la atención.
• Iconografía: Uso de íconos como círculos de advertencia y marcas de verificación para complementar visualmente el mensaje.

3. Generar el mensaje de stock según la cantidad

• Función involucrada: obtener_mensaje_stock($stock_quantity)

Esta es la lógica detrás de los avisos dinámicos:

• Alta disponibilidad (más de 100 unidades): Muestra un mensaje verde con un ícono de verificación.
• Disponibilidad media (entre 10 y 100 unidades): Alerta con un mensaje naranja que incita precaución.
• Disponibilidad baja (menos de 10 unidades): Mensaje rojo que sugiere actuar con urgencia.
• Sin stock: Aviso gris con el texto tachado para indicar la falta del producto.

Esto garantiza que los clientes obtengan información clara y persuasiva en tiempo real.

4. Mostrar el mensaje de stock

• Función involucrada: mostrar_mensaje_stock($context)

Esta función utiliza la cantidad de stock del producto para decidir qué mensaje mostrar, aplicándolo según el contexto (por ejemplo, en las páginas de categorías o en la ficha del producto).

5. Insertar el mensaje en la lista de productos

• Hook involucrado: add_action('woocommerce_before_shop_loop_item_title', ...)

Este hook agrega el aviso de stock justo antes del título de cada producto en la lista de productos, logrando que sea visible sin necesidad de abrir la ficha del producto.

6. Personalizar los avisos de stock en la ficha del producto

• Hooks involucrados:
  • add_filter('woocommerce_get_availability_text', ...): Este hook oculta los mensajes de stock predeterminados que WooCommerce muestra en la ficha del producto.
  • add_action('woocommerce_get_availability_text', ...): Muestra el aviso personalizado en su lugar.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

// Hook para agregar estilos al aviso de stock
add_action('wp_head', 'agregar_estilos_mensaje_stock');

// Estilos CSS para los mensajes de stock
function agregar_estilos_mensaje_stock() {
    echo '<style>
        .stock-notice {
            display: flex;
            align-items: center;
            margin: 15px 0;
            padding: 10px 15px;
            border-radius: 8px;
            font-size: 0.9em;
            font-weight: 500;
            color: #000;
            background-color: #f9f9f9;
            border-left: 5px solid transparent;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .stock-notice:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        .stock-notice i {
            margin-right: 10px;
            font-size: 1.2em;
        }
        .stock-notice.green-icon { border-left-color: #28a745; }
        .stock-notice.green-icon i { color: #28a745; }
        .stock-notice.orange-icon { border-left-color: #fd7e14; }
        .stock-notice.orange-icon i { color: #fd7e14; }
        .stock-notice.red-icon { border-left-color: #dc3545; }
        .stock-notice.red-icon i { color: #dc3545; }
        .stock-notice.out-of-stock {
            color: #6c757d;
            background-color: #f8f9fa;
            text-decoration: line-through;
            border-left-color: #6c757d;
        }
        .stock-notice.out-of-stock i {
            color: #6c757d;
        }
        .stock-notice span.stock-quantity {
            font-weight: bold;
            color: #007bff;
            font-size: 1em;
            margin-left: 8px;
            background-color: #e9ecef;
            padding: 2px 6px;
            border-radius: 4px;
        }
    </style>';
}

// Generar el mensaje de stock basado en la cantidad
function obtener_mensaje_stock($stock_quantity) {
    if ($stock_quantity > 100) {
        return '<div class="stock-notice green-icon"><i class="fas fa-check-circle"></i> Por ahora hay stock suficiente.  <span class="stock-quantity">' . $stock_quantity . ' uds.</span></div>';
    } elseif ($stock_quantity <= 100 && $stock_quantity >= 10) {
        return '<div class="stock-notice orange-icon"><i class="fas fa-exclamation-circle"></i> ¡Ten cuidado! Se está vendiendo rápido.  <span class="stock-quantity">' . $stock_quantity . ' uds.</span></div>';
    } elseif ($stock_quantity > 0 && $stock_quantity < 10) {
        return '<div class="stock-notice red-icon"><i class="fas fa-exclamation-triangle"></i> ¡Date prisa o te quedas sin él!  <span class="stock-quantity">' . $stock_quantity . ' uds.</span></div>';
    } else {
        return '<div class="stock-notice out-of-stock"><i class="fas fa-times-circle"></i> Te quedaste sin el producto. 0 uds.</div>';
    }
}

// Mostrar el mensaje de stock
function mostrar_mensaje_stock($context) {
    global $product;

    if ($product->managing_stock()) {
        echo obtener_mensaje_stock($product->get_stock_quantity());
    }
}

// Hook para mostrar el aviso de stock en el loop de productos
add_action('woocommerce_before_shop_loop_item_title', function() {
    mostrar_mensaje_stock('loop');
}, 10);

// Hook para ocultar el mensaje predeterminado de stock en la ficha del producto
add_filter('woocommerce_get_availability_text', function($availability, $product) {
    return ''; // Oculta el mensaje predeterminado
}, 10, 2);

// Hook para mostrar el aviso de stock personalizado en la ficha del producto
add_action('woocommerce_get_availability_text', function() {
    mostrar_mensaje_stock('single');
}, 15);

Lenguaje del código: PHP (php)

En conclusión, este código no solo mejora el diseño de tu tienda WooCommerce, sino que también aprovecha técnicas de persuasión para fomentar la compra inmediata. Personalizar los mensajes de stock permite:

• Crear urgencia cuando el inventario es limitado.
• Generar confianza al comunicar disponibilidad en tiempo real.
• Mejorar la experiencia del cliente mediante un diseño visual atractivo y funcional.

Nos vemos en el siguiente tiutorial. Un saludo.