✅ Ofertas Temporales con Cuenta Regresiva en Woocommerce (Sin Plugins)

Este código personalizado para WooCommerce es como tener un asistente exclusivo para gestionar ofertas en tu tienda en línea. Imagina que tienes productos con descuentos temporales y quieres un control total sobre cómo se manejan. Aquí es donde entra en acción este código.

En primer lugar, añade un campo especializado para que puedas definir fácilmente cuánto tiempo durará la oferta de cada producto. Este detalle es fundamental para que puedas personalizar tus promociones de manera eficaz.

Cuando guardas la información de tu producto, este código se encarga de guardar no solo el tiempo designado, sino también de calcular automáticamente la fecha y hora exactas en que esa oferta expirará. Esta funcionalidad simplifica el proceso de gestión y planificación de tus promociones.

Ahora viene la parte más atractiva: cuando un cliente visita la página del producto, se encuentra con un contador regresivo que muestra cuánto tiempo queda para aprovechar esa oferta exclusiva. Y aquí está lo brillante: una vez que se agota ese tiempo, el código realiza de manera automática el cambio de precio al valor normal.

La gran ventaja de este enfoque personalizado radica en su adaptabilidad y en brindarte el control total sobre las ofertas de tu tienda. A diferencia de los plugins genéricos, este código se ajusta a tus necesidades específicas, manteniendo tu tienda eficiente y ágil. Si buscas una solución profesional y a la vez amigable para gestionar ofertas, este código es tu aliado confiable.

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

<?php
// Agregar el campo de tiempo de oferta en los datos del producto
function agregar_campo_tiempo_oferta() {
    woocommerce_wp_text_input(
        array(
            'id'          => '_tiempo_oferta',
            'label'       => __('Tiempo de oferta (minutos)', 'text-domain'),
            'desc_tip'    => true,
            'description' => __('Ingrese la duración de la oferta en minutos.', 'text-domain'),
            'type'        => 'number',
            'custom_attributes' => array(
                'step' => '1',
                'min'  => '1',
            ),
        )
    );
}
add_action('woocommerce_product_options_general_product_data', 'agregar_campo_tiempo_oferta');

// Guardar el valor del campo de tiempo de oferta y la fecha de finalización
function guardar_campo_tiempo_oferta($post_id) {
    $tiempo_oferta = isset($_POST['_tiempo_oferta']) ? sanitize_text_field($_POST['_tiempo_oferta']) : '';
    update_post_meta($post_id, '_tiempo_oferta', $tiempo_oferta);

    if ($tiempo_oferta) {
        $fecha_final = strtotime('+' . $tiempo_oferta . ' minutes', current_time('timestamp'));
        update_post_meta($post_id, '_fecha_final_oferta', $fecha_final);
    } else {
        delete_post_meta($post_id, '_fecha_final_oferta');
    }
}
add_action('woocommerce_process_product_meta', 'guardar_campo_tiempo_oferta');

// ...

// Mostrar el contador regresivo en la página de productos
function mostrar_contador_regresivo() {
    global $product;

    $tiempo_oferta = get_post_meta($product->get_id(), '_tiempo_oferta', true);

    if ($tiempo_oferta) {
        $fecha_final = get_post_meta($product->get_id(), '_fecha_final_oferta', true);

        if ($fecha_final) {
            $tiempo_restante = $fecha_final - current_time('timestamp');

            if ($tiempo_restante > 0) {
                $minutos = floor($tiempo_restante / 60);
                $segundos = $tiempo_restante % 60;

                ?>
                <div id="contador-regresivo" class="contador-container">
                    <p  class="contador-text">La oferta termina en: <span id="cuenta-atras" data-minutos="<?php echo esc_attr($minutos); ?>" data-segundos="<?php echo esc_attr($segundos); ?>"></span></p>
                </div>
                <script>
                    jQuery(document).ready(function ($) {
                        var minutos = $('#cuenta-atras').data('minutos');
                        var segundos = $('#cuenta-atras').data('segundos');

                        function actualizarContador() {
                            var display = $('#cuenta-atras');
                            if (minutos === 0 && segundos === 0) {
                                // Cuando el contador llega a cero, cambiar el precio
                                cambiarPrecioNormal();
                            } else {
                                if (segundos === 0) {
                                    minutos--;
                                    segundos = 59;
                                } else {
                                    segundos--;
                                }

                                var minutosStr = minutos < 10 ? '0' + minutos : minutos;
                                var segundosStr = segundos < 10 ? '0' + segundos : segundos;

                                display.text(minutosStr + 'm ' + segundosStr + 's');
                                setTimeout(actualizarContador, 1000);
                            }
                        }

                        function cambiarPrecioNormal() {
    var product_id = <?php echo $product->get_id(); ?>;
    var mensaje = 'La oferta terminó. Estate atento para próximas ofertas.';

    $.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        type: 'POST',
        data: {
            action: 'cambiar_precio_normal_ajax',
            product_id: product_id,
        },
        success: function (response) {
            // Mostrar el mensaje
            $('#contador-regresivo').html('<p>' + mensaje + '</p>');
            // Puedes actualizar la página o realizar otras acciones si es necesario
            //location.reload();
        }
    });
}

                        actualizarContador();
                    });
                </script>
                <?php
                return;
            }
        }
    }
}
add_action('woocommerce_single_product_summary', 'mostrar_contador_regresivo');

// Función para cambiar el precio al precio normal de WooCommerce (AJAX)
function cambiar_precio_normal_ajax_handler() {
    if (isset($_POST['product_id'])) {
        $product_id = sanitize_text_field($_POST['product_id']);

        // Obtener el precio normal del producto
        $normal_price = get_post_meta($product_id, '_regular_price', true);

        // Actualizar el precio del producto
        update_post_meta($product_id, '_price', $normal_price);
        update_post_meta($product_id, '_regular_price', $normal_price);
        update_post_meta($product_id, '_sale_price', '');

        echo 'success';
    }
    wp_die();
}
add_action('wp_ajax_cambiar_precio_normal_ajax', 'cambiar_precio_normal_ajax_handler');
add_action('wp_ajax_nopriv_cambiar_precio_normal_ajax', 'cambiar_precio_normal_ajax_handler');


function agregar_estilos_contador_regresivo() {
    ?>
    <style>
        /* Estilos para el contenedor del contador regresivo */
        .contador-container {
            background-color: #f2f2f2;
            padding: 10px;
            border: 1px solid #ddd;
            margin-bottom: 20px;
        }

        /* Estilos para el texto del contador */
        .contador-text {
            font-size: 16px;
            color: #333;
            margin: 0;
        }

      
    </style>
    <?php
}

// Añade los estilos al hook wp_head
add_action('wp_head', 'agregar_estilos_contador_regresivo');

Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

1. Agregar Campo de Tiempo de Oferta al Producto

agregar_campo_tiempo_oferta (Function)

• Agrega un campo de texto a la interfaz de edición del producto en el panel de administración de WooCommerce.
• Este campo permite ingresar la duración de la oferta en minutos.

2. Guardar Valor del Campo de Tiempo de Oferta y la Fecha de Finalización

guardar_campo_tiempo_oferta (Function)

• Se ejecuta cuando se guarda o actualiza un producto.
• Guarda el valor del campo de tiempo de oferta y calcula la fecha de finalización de la oferta.
• Si no se proporciona un tiempo de oferta, elimina la meta ‘_fecha_final_oferta’.

3. Mostrar Contador Regresivo en la Página del Producto

mostrar_contador_regresivo (Function)

• Muestra un contador regresivo en la página del producto si hay una oferta en curso.
• Utiliza JavaScript para actualizar dinámicamente el tiempo restante y cambiar el precio cuando la oferta finaliza.

4. Cambiar Precio al Precio Normal (AJAX)

cambiar_precio_normal_ajax_handler (Function)

• Maneja la lógica AJAX para cambiar el precio del producto al precio normal cuando la oferta finaliza.
• Se ejecuta cuando se realiza una solicitud AJAX desde el cliente.

5. Estilos para el Contador Regresivo

agregar_estilos_contador_regresivo (Function)

• Agrega estilos CSS para el contenedor y el texto del contador regresivo.
• Se incluye en el hook ‘wp_head’ para que los estilos se carguen en el encabezado HTML.

Resumen:

El código proporciona una funcionalidad completa para gestionar ofertas de productos en una tienda WooCommerce, incluyendo la visualización de un contador regresivo y la actualización dinámica del precio utilizando AJAX. Asegúrate de que tu tema de WordPress sea compatible con estos hooks y funciones de WooCommerce para que el código funcione correctamente.

Nos vemos en el siguiente tutorial.

Un saludo