✅ Mostrar Cupones Disponibles en el Carrito de WooCommerce

Imagina que un cliente está a punto de completar su compra, pero no sabe que tu tienda tiene cupones de descuento disponibles. ¿Qué pasa? Podría abandonar el carrito o sentir que no está aprovechando al máximo su experiencia de compra. Este simple cambio, mostrar los cupones disponibles directamente en el carrito, puede marcar una gran diferencia.

El código que te comparto hoy hace exactamente eso: despliega todos los cupones válidos para los clientes directamente en el carrito de WooCommerce, junto con sus detalles, como el tipo de descuento y los requisitos para aplicarlos. Además, les permite copiar el código del cupón con un solo clic. Es una solución sencilla pero muy efectiva para hacer que tus promociones sean visibles y fáciles de usar.

¿Por qué deberías implementarlo? Primero, porque mejora la experiencia del cliente. Mostrar cupones directamente elimina la frustración de buscar códigos promocionales o no saber si están disponibles. Segundo, porque puede ayudarte a incrementar las conversiones: los descuentos visibles en el momento correcto son un gran incentivo para completar la compra.

Por último, este código está diseñado para ser intuitivo y visualmente atractivo. Incluye estilos responsivos, para que se vea bien en móviles y escritorio, y mensajes dinámicos que hacen que todo se sienta profesional y fluido. Es una manera sencilla de añadir valor a tu tienda sin complicaciones.

En este artículo te explico cómo funciona el código, cómo implementarlo paso a paso y cómo puedes personalizarlo para adaptarlo a las necesidades de tu tienda. Vamos directo al grano para que lo tengas listo en poco tiempo y empieces a ver resultados.

Por cierto, si te interesa este tutorial es posible que te interese este otro de aquí.

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

add_action('woocommerce_after_cart_table', 'mostrar_cupones_disponibles_en_carrito');

function mostrar_cupones_disponibles_en_carrito() {
    // Obtener todos los cupones publicados
    $args = array(
        'posts_per_page' => -1,
        'post_type'      => 'shop_coupon',
        'post_status'    => 'publish'
    );
    $cupones = get_posts($args);

    if (!$cupones) {
        return;
    }

    echo '<div class="cupones-disponibles">';
    echo '<h3>Cupones de Descuento Disponibles</h3>';
    echo '<p class="cupones-instrucciones">Para utilizar un cupón, cópialo con el botón correspondiente y pégalo en el formulario de cupones de arriba. Luego haz clic en "Aplicar cupón" y el descuento se aplicará automáticamente.</p>';
    echo '<ul>';

    foreach ($cupones as $cupon_post) {
        $cupon_code = $cupon_post->post_title;
        $cupon = new WC_Coupon($cupon_code);

        // Verificar si el cupón es válido y no está usado por el usuario
        if (cupon_valido_para_usuario($cupon)) {
            $discount_type = $cupon->get_discount_type(); // Tipo de descuento
            $amount = $cupon->get_amount(); // Cantidad de descuento
            $minimum_amount = $cupon->get_minimum_amount(); // Gasto mínimo
            $maximum_amount = $cupon->get_maximum_amount(); // Gasto máximo
            $product_ids = $cupon->get_product_ids(); // Productos específicos
            $category_ids = $cupon->get_product_categories(); // Categorías específicas

            // Traducir el tipo de descuento
            switch ($discount_type) {
                case 'percent':
                    $discount_type_text = 'Porcentaje';
                    break;
                case 'fixed_cart':
                    $discount_type_text = 'Descuento fijo en el carrito';
                    break;
                case 'fixed_product':
                    $discount_type_text = 'Descuento fijo por producto';
                    break;
                default:
                    $discount_type_text = 'Descuento';
                    break;
            }

            echo '<li>';
            echo '<div class="cupon-info">';
            echo '<span class="cupon-codigo">' . esc_html($cupon_code) . '</span>';
            echo '<span class="cupon-descripcion">' . esc_html($cupon->get_description()) . '</span>';

            // Mostrar detalles adicionales del cupón
            echo '<div class="cupon-detalles">';
            echo '<p><strong>Tipo de descuento:</strong> ' . $discount_type_text . '</p>';
if ($discount_type === 'percent') {
    // Si el descuento es un porcentaje, mostrar como porcentaje
    echo '<p><strong>Cantidad de descuento:</strong> ' . $amount . '%</p>';
} else {
    // Si el descuento es fijo, mostrar como valor en euros
    echo '<p><strong>Cantidad de descuento:</strong> ' . wc_price($amount) . '</p>';
}

            if ($minimum_amount) {
                echo '<p><strong>Gasto mínimo requerido:</strong> ' . wc_price($minimum_amount) . '</p>';
            }
            if ($maximum_amount) {
                echo '<p><strong>Gasto máximo permitido:</strong> ' . wc_price($maximum_amount) . '</p>';
            }

            // Mostrar productos específicos
            if (!empty($product_ids)) {
                echo '<p><strong>Productos aplicables:</strong> ' . implode(', ', array_map(function ($id) {
                    $product = wc_get_product($id);
                    return $product ? $product->get_name() : '';
                }, $product_ids)) . '</p>';
            }

            // Mostrar categorías específicas
            if (!empty($category_ids)) {
                echo '<p><strong>Categorías aplicables:</strong> ' . implode(', ', array_map(function ($id) {
                    $category = get_term($id, 'product_cat');
                    return $category ? $category->name : '';
                }, $category_ids)) . '</p>';
            }

            echo '</div>'; // Fin de cupon-detalles
            echo '</div>';
            echo '<button class="copiar-cupon" data-cupon="' . esc_attr($cupon_code) . '">Copiar</button>';
            echo '</li>';
        }
    }

    echo '</ul>';
    echo '<p class="mensaje-cupon" style="display:none;"></p>'; // Mensaje dinámico
    echo '</div>';

    // Agregar estilos y scripts personalizados
    add_action('wp_footer', 'agregar_estilos_y_scripts_cupones');
}

// Función para verificar si un cupón es válido para el usuario
function cupon_valido_para_usuario($cupon) {
    if (!$cupon->is_valid()) {
        return false; // Si el cupón no es válido en general
    }

    $user_id = get_current_user_id();

    // Si no hay usuario conectado, ignoramos restricciones específicas
    if (!$user_id) {
        return true; // Mostrar cupones generales para usuarios no autenticados
    }

    // Verificar cupones ya usados por el usuario
    $orders = wc_get_orders(array(
        'limit' => -1,
        'customer_id' => $user_id,
        'status' => array('wc-completed', 'wc-processing', 'wc-on-hold'),
    ));

    foreach ($orders as $order) {
        $used_coupons = $order->get_coupon_codes();
        if (in_array($cupon->get_code(), $used_coupons)) {
            return false; // Si el cupón ya fue usado por este usuario
        }
    }

    return true; // Si el cupón es válido y no ha sido usado
}

function agregar_estilos_y_scripts_cupones() {
    ?>
    <style>
        .cupones-disponibles {
            margin-top: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-family: Arial, sans-serif;
        }
        .cupones-disponibles h3 {
            font-size: 20px;
            margin-bottom: 10px;
            color: #333333;
            text-align: center;
        }
        .cupones-instrucciones {
            font-size: 14px;
            color: #555555;
            text-align: center;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        .cupones-disponibles ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .cupones-disponibles li {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
            padding: 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        .cupon-info {
            max-width: 70%;
        }
        .cupon-codigo {
            font-weight: bold;
            font-size: 16px;
            color: #0071a1;
            display: block;
        }
        .cupon-descripcion {
            font-size: 14px;
            color: #555555;
        }
        .cupon-detalles p {
            font-size: 13px;
            margin: 5px 0;
        }
        .copiar-cupon {
            background-color: #0071a1;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 8px 15px;
            cursor: pointer;
            font-size: 14px;
            text-transform: uppercase;
            transition: background-color 0.3s ease;
        }
        .copiar-cupon:hover {
            background-color: #005f85;
        }
        .mensaje-cupon {
            margin-top: 15px;
            font-size: 14px;
            color: #28a745;
            font-weight: bold;
            text-align: center;
        }
        @media (max-width: 768px) {
            .cupones-disponibles li {
                flex-direction: column;
                align-items: flex-start;
            }
            .copiar-cupon {
                margin-top: 10px;
                width: 100%;
                text-align: center;
            }
            .cupon-info {
                max-width: 100%;
            }
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const botonesCopiar = document.querySelectorAll('.copiar-cupon');
            const mensaje = document.querySelector('.mensaje-cupon');

            botonesCopiar.forEach(boton => {
                boton.addEventListener('click', function (event) {
                    event.preventDefault(); // Evitar recarga de la página
                    const cupon = this.getAttribute('data-cupon');
                    navigator.clipboard.writeText(cupon).then(() => {
                        mensaje.textContent = `¡Cupón "${cupon}" copiado al portapapeles!`;
                        mensaje.style.display = 'block';
                        setTimeout(() => {
                            mensaje.style.display = 'none';
                        }, 3000);
                    });
                });
            });
        });
    </script>
    <?php
}

Lenguaje del código: PHP (php)

Entendiendo en Código

1. add_action('woocommerce_after_cart_table', 'mostrar_cupones_disponibles_en_carrito')

Esta línea añade una acción al hook woocommerce_after_cart_table, que se ejecuta después de la tabla del carrito en WooCommerce. Conecta el hook a la función mostrar_cupones_disponibles_en_carrito, permitiendo que el código personalizado se ejecute en ese lugar específico de la página del carrito.

2. mostrar_cupones_disponibles_en_carrito

Esta función es el núcleo del código. Su propósito es recuperar, filtrar y mostrar los cupones disponibles en la tienda.

• Obtención de cupones publicados:
  Utiliza la función get_posts para recuperar todas las publicaciones del tipo shop_coupon que están publicadas. Esto devuelve un array de objetos de cupones.
• Generación del HTML de la lista de cupones:
  Si hay cupones disponibles, se genera un contenedor HTML con una lista de cupones. Cada cupón incluye:
  • Su código (título del cupón).
  • Su descripción.
  • Detalles específicos, como tipo de descuento, cantidad, restricciones de gasto mínimo/máximo, productos o categorías aplicables.
• Verificación de validez:
  Antes de mostrar un cupón, se llama a la función cupon_valido_para_usuario para comprobar si el cupón es válido para el cliente actual.

3. cupon_valido_para_usuario($cupon)

Esta función determina si un cupón específico es válido para el usuario actual. Realiza varias verificaciones:

• Validez general del cupón:
  Usa $cupon->is_valid() para verificar si el cupón está activo y cumple con las reglas generales de WooCommerce (como fechas de vencimiento).
• Usuario no autenticado:
  Si el cliente no está registrado, se asume que puede usar cualquier cupón válido, ya que no hay pedidos previos que revisar.
• Revisión de pedidos anteriores:
  Si el cliente está autenticado, la función revisa todos los pedidos completados, en proceso o en espera del usuario para comprobar si el cupón ya fue usado. Si el cupón aparece en alguno de esos pedidos, se considera no válido para mostrar.

Devuelve true si el cupón pasa todas las verificaciones, o false en caso contrario.

4. Detalles del cupón

Para cada cupón válido, el código obtiene datos específicos utilizando métodos de WooCommerce:

• Tipo de descuento (get_discount_type): Define si el descuento es un porcentaje, un monto fijo en el carrito o por producto.
• Cantidad de descuento (get_amount): Especifica el valor exacto del descuento.
• Restricciones de gasto mínimo/máximo (get_minimum_amount, get_maximum_amount): Establecen límites en el monto total del carrito para aplicar el descuento.
• Productos aplicables (get_product_ids): Lista los IDs de productos específicos a los que se aplica el cupón.
• Categorías aplicables (get_product_categories): Lista los IDs de las categorías específicas aplicables.

Estos detalles se formatean en texto comprensible para el cliente y se añaden al HTML generado.

5. Diseño y presentación

Se genera una sección HTML estilizada para mostrar los cupones en el carrito.

• Estilo CSS:
  Define un diseño atractivo y responsivo, asegurando que la sección de cupones se integre perfectamente con el tema de la tienda WooCommerce.
• Scripts de interacción:
  Incluye un script en JavaScript para manejar el botón de «Copiar». Este script copia el código del cupón al portapapeles y muestra un mensaje dinámico de confirmación al cliente.

6. agregar_estilos_y_scripts_cupones

Esta función añade los estilos y scripts personalizados al pie de página (wp_footer).

• Estilos:
  Define el diseño visual de la sección de cupones, incluyendo colores, tipografías y disposición para distintos tamaños de pantalla.
• Scripts:
  Implementa un comportamiento dinámico para los botones de copiar, usando la API navigator.clipboard para copiar el código del cupón y actualizar el mensaje de confirmación visible para el cliente.

7. Flujo general del código

1. Cuando el cliente carga la página del carrito, el hook woocommerce_after_cart_table ejecuta la función mostrar_cupones_disponibles_en_carrito.
2. Esta función recupera los cupones publicados y valida cuáles son aplicables al cliente actual.
3. Para cada cupón válido, se genera una entrada en la lista con su código, descripción y detalles adicionales.
4. Se incluye un botón para copiar el código al portapapeles.
5. Se aplican estilos y scripts para que la presentación sea profesional y fácil de usar.

En conclusión, este código es una excelente herramienta para mejorar la experiencia de tus clientes en WooCommerce y aumentar las posibilidades de conversión. Al mostrar cupones disponibles directamente en el carrito, no solo eliminas la fricción en el proceso de aplicar descuentos, sino que también das un toque profesional y atractivo a tu tienda. Además, las verificaciones incluidas aseguran que los cupones mostrados sean relevantes y válidos para cada cliente, lo que evita confusiones y posibles errores.

Si necesitas adaptar este código a las necesidades específicas de tu tienda, optimizar su funcionalidad, o incluso desarrollar una nueva característica desde cero, ¡puedes contar conmigo! Escríbeme por WhatsApp haciendo clic aquí y estaré encantado de ayudarte. Ya sea para retocar este código o crear algo completamente nuevo.

Nos vemos en el siguiente tutorial.

Un saludo.