✅Redirección con Temporizador a Web Externa tras Realizar un Pedido en WooCommerce (Sin Plugins)

Este código personalizado para WordPress y WooCommerce mejora la experiencia de compra en línea al introducir una redirección personalizada después de que un usuario ha completado exitosamente una compra. Después de realizar una transacción, el usuario es dirigido automáticamente a una página externa específica luego de 5 segundos, mientras visualiza un mensaje informativo.

Posibles casos de uso incluyen situaciones en las que los propietarios de tiendas en línea desean proporcionar información adicional o guiar a los clientes hacia recursos externos después de una compra. Por ejemplo, podría utilizarse para redirigir a los clientes a una página de membresía, agradeciéndoles por su compra y proporcionando información adicional sobre sus beneficios.

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

<?php
// Redireccionar a una URL externa después de una compra exitosa con un retraso de 5 segundos y mensaje
add_action('woocommerce_thankyou', 'redireccionar_con_retraso_y_mensaje');

function redireccionar_con_retraso_y_mensaje($order_id) {
    // URL externa a la que deseas redirigir
    $url_externa = 'https://pluginsweb.es';

    // Mensaje que se incluirá en el URL de destino
    $mensaje = 'Vas a ser redireccionado a un enlace externo.';

    // Crear el script de redirección después de 5 segundos con el mensaje en el URL
    echo '<script type="text/javascript">
            setTimeout(function() {
                // Crear un div con el mensaje
                var mensajeDiv = document.createElement("div");
                mensajeDiv.innerHTML = decodeURIComponent("' . rawurlencode($mensaje) . '");
                mensajeDiv.style.cssText = "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); z-index: 9999;";

                // Agregar el div al cuerpo del documento
                document.body.appendChild(mensajeDiv);
                
                // Redirigir a la URL externa después de mostrar el mensaje
                setTimeout(function() {
                    window.location.href = "' . esc_url($url_externa) . '";
                }, 5000);
            }, 5000);
          </script>';
}
Lenguaje del código: PHP (php)

Entendiendo el Código

En primer lugar, se utiliza el gancho woocommerce_thankyou en conjunto con add_action. Este gancho se activa después de que se ha mostrado la página de agradecimiento de WooCommerce tras una compra. Cuando este evento ocurre, la función redireccionar_con_retraso_y_mensaje es invocada.

Dentro de esta función, se define la URL externa a la que se redirigirá al usuario después de la compra. En este caso, se ha establecido como ‘https://pluginsweb.es‘. Además, se define un mensaje que se mostrará al usuario antes de la redirección. Este mensaje es personalizable y está configurado para informar al usuario que será redirigido a un enlace externo.

El siguiente paso es la creación de un script JavaScript incrustado en la página, el cual se ejecutará después de un breve retraso de 5 segundos. Este script tiene dos partes fundamentales:

1. Creación y visualización del mensaje:
   • Se genera un nuevo elemento HTML de tipo div que contiene el mensaje definido anteriormente.
   • Se aplican estilos al div para que aparezca como un mensaje emergente en el centro de la pantalla.
   • Este div se añade al cuerpo del documento, haciéndolo visible para el usuario.
2. Redirección a la URL externa:
   • Después de mostrar el mensaje durante 5 segundos, se activa otra función que redirige al usuario a la URL externa especificada.

En resumen, este código proporciona una solución personalizada para mejorar la experiencia del usuario después de una compra. La introducción de un mensaje informativo y una redirección cuidadosamente programada contribuye a una interacción más amigable y orientada al usuario, sin depender de la incorporación de plugins adicionales.

Nos vemos en el siguiente tutorial. Un saludo.