Cómo Implementar un Límite de Promoción 2x1 en WooCommerce: Ejemplo con Productos de $87.500 Snippet HTML JavaScript WordPress

Cómo Implementar un Límite de Promoción 2×1 en WooCommerce: Ejemplo con Productos de $87.500.

Introducción

En el mundo del ecommerce, las promociones 2×1 son excelentes para impulsar ventas, pero necesitan una implementación técnica cuidadosa. En este artículo, te mostraré cómo limitar la compra de productos con precio específico ($87.500 en este caso) usando WooCommerce, jQuery y técnicas avanzadas de desarrollo web.

Requisitos Previos.

Tienda WooCommerce funcionando
Acceso para añadir código JavaScript personalizado
Productos con precio de $87.500 que participan en la promoción

Solución Técnica Completa.

JavaScript

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
jQuery(function($) {
    // Configuración central
    const CONFIG = {
        TARGET_PRICE: 87500,  // Precio promocional
        LIMIT: 2,             // Límite máximo de unidades
        PROMO_NAME: '2x1 $87.500',
        SELECTORS: {
            price: '.price .woocommerce-Price-amount.amount bdi',
            cartItem: '.woocommerce-mini-cart-item',
            quantity: '.quantity',
            addToCartForm: 'form.cart',
            addButton: '.single_add_to_cart_button'
        }
    };

    // Convertir precio textual a numérico
    function getNumericPrice(priceText) {
        return parseInt(priceText.replace(/[^\d]/g, '')) || 0;
    }

    // Contar productos en promoción en el carrito
    function countPromoItems() {
        let count = 0;
        $(CONFIG.SELECTORS.cartItem).each(function() {
            const priceText = $(this).find(CONFIG.SELECTORS.price).text();
            if (getNumericPrice(priceText) === CONFIG.TARGET_PRICE) {
                const qty = $(this).find(CONFIG.SELECTORS.quantity).text().match(/\d+/) || [1];
                count += parseInt(qty[0]);
            }
        });
        return count;
    }

    // Actualizar interfaz según límite
    function updatePurchaseInterface() {
        if (!isProductPage()) return;
        
        const currentPrice = getNumericPrice($(CONFIG.SELECTORS.price).text());
        if (currentPrice !== CONFIG.TARGET_PRICE) return;
        
        const promoCount = countPromoItems();
        const $form = $(CONFIG.SELECTORS.addToCartForm);
        
        if (promoCount >= CONFIG.LIMIT) {
            $form.hide();
            showLimitMessage();
        } else {
            $form.show();
            $('#promo-limit-message').remove();
        }
    }

    // Mostrar mensaje de límite
    function showLimitMessage() {
        if ($('#promo-limit-message').length > 0) return;
        
        $(CONFIG.SELECTORS.addToCartForm).after(`
            <div id="promo-limit-message" class="woocommerce-message woocommerce-error">
                <strong>Límite alcanzado</strong>: Has agregado el máximo de ${CONFIG.LIMIT} unidades 
                en la promoción ${CONFIG.PROMO_NAME}. Para comprar más, primero reduce la cantidad 
                en tu carrito o elige otros productos.
            </div>
        `);
    }

    // Verificar si es página de producto
    function isProductPage() {
        return $('body').hasClass('single-product');
    }

    // Observar cambios en el carrito
    function initCartObserver() {
        const cartWidget = document.querySelector('.widget_shopping_cart_content');
        if (cartWidget) {
            new MutationObserver(updatePurchaseInterface)
                .observe(cartWidget, { childList: true, subtree: true });
        }
    }

    // Inicialización
    $(document).ready(function() {
        initCartObserver();
        setInterval(updatePurchaseInterface, 1500);
        updatePurchaseInterface();
        
        // Prevenir añadir sobre el límite
        $(document).on('click', CONFIG.SELECTORS.addButton, function(e) {
            if (countPromoItems() >= CONFIG.LIMIT) {
                e.preventDefault();
                return false;
            }
        });
    });
});
</script>

Explicación Paso a Paso

Configuración Centralizada: Todos los parámetros importantes están organizados en el objeto CONFIG para fácil mantenimiento.
Detección Precisa de Precio:
- La función getNumericPrice() convierte formatos como “$ 87.500” a 87500
- Usa selectores específicos de WooCommerce para mayor precisión
Conteo de Productos:
- Recorre cada ítem del carrito
- Suma las cantidades solo de productos con precio $87.500
Gestión de la Interfaz:
- Oculta/muestra el formulario de compra según el límite
- Muestra mensajes de error estilo WooCommerce
Optimizaciones Clave:
- Observador de mutaciones para cambios en el carrito
- Verificación periódica como respaldo
- Prevención de clics adicionales

Personalización para Otros Precios

Para adaptar este código a otros valores (ej: $92.000), solo necesitas cambiar:

javascript

TARGET_PRICE: 92000,
PROMO_NAME: '2x1 $92.000'

Consejos de Implementación

Prueba en entorno de staging antes de implementar en producción
Personaliza los mensajes para que coincidan con tu tono de marca
Ajusta los estilos del mensaje de límite para que combine con tu tema
Considera usar hooks de WooCommerce para una solución más permanente

Conclusión

Esta implementación proporciona un control preciso sobre las promociones 2×1 en WooCommerce, mejorando la experiencia del usuario mientras proteges tu estrategia comercial. El código es mantenible, escalable y se adapta fácilmente a diferentes valores promocionales.