Cómo personalizar tu página de agradecimiento de WooCommerce (3 métodos) 

Uno de los momentos más pasados por alto en una tienda online es lo que sucede justo después de una venta. Esa página final no es solo una confirmación. Es tu primera oportunidad para aprovechar la confianza que un nuevo cliente acaba de depositar en ti.

En esta guía, te mostraré tres formas de crear una página de agradecimiento personalizada de WooCommerce: un constructor sin código, una redirección con plugin y el método de código y ganchos. Empecemos por el más fácil.

¿Por qué personalizar tu página de agradecimiento de WooCommerce?

La página de agradecimiento predeterminada de WooCommerce no está diseñada para vender nada. Después de que los compradores terminan tu página de pago, aterrizan en una pantalla de confirmación simple como esta:

Cómo se ve tu página de agradecimiento depende de tu tema de WordPress. De cualquier manera, esa pantalla predeterminada no está optimizada para conversiones ni para la interacción con el cliente.

Reemplázala con un diseño personalizado y podrás convertir esa página en una pantalla de alta conversión que te ayude a:

• Añadir una venta adicional o cruzada posterior a la compra
• Mostrar los artículos más vendidos o las novedades
• Ofrecer un cupón para futuras compras
• Enlazar a guías de productos, ayuda de configuración o contenido adicional
• Añadir botones para compartir en redes sociales para aumentar el alcance

Cómo crear una página de agradecimiento personalizada de WooCommerce en WordPress

Usaremos SeedProd para crear una página de agradecimiento personalizada de WooCommerce para tu tienda online.

SeedProd es un constructor de sitios web de WordPress de arrastrar y soltar utilizado por más de 1 millón de sitios de WordPress. Es uno de los mejores constructores de sitios web para WordPress.

Te permite crear páginas de destino de alta conversión, temas personalizados de WordPress y diseños responsivos sin código. Incluso puedes usarlo para crear sitios web de WooCommerce sin contratar a un desarrollador.

Sigue los pasos a continuación para crear una página de agradecimiento personalizada de WooCommerce con SeedProd.

Tutorial en vídeo

Paso 1. Instala el plugin SeedProd

Primero, descarga el plugin SeedProd e instálalo en tu sitio web de WordPress. Aquí tienes una guía sobre cómo instalar un plugin de WordPress si necesitas ayuda.

Puedes obtener una versión gratuita de SeedProd, pero usaremos SeedProd Elite para los bloques de WooCommerce. Los bloques de Añadir al carrito y Productos más vendidos requieren el nivel Elite, así que comprueba tu plan antes de empezar.

Después de instalar y activar el plugin, ve a SeedProd » Ajustes desde tu panel de WordPress e introduce tu clave de licencia.

Puedes encontrar tu clave de licencia en la sección de cuenta del sitio web de SeedProd.

A continuación, ve a SeedProd » Páginas de destino. Aquí es donde habilitas cualquiera de los modos de página de SeedProd y creas una nueva página de agradecimiento.

Selecciona el botón Añadir nueva página de destino para crear tu página de agradecimiento.

Paso 2. Elige una plantilla de página de agradecimiento en SeedProd

Puedes elegir una plantilla de página de destino en la siguiente pantalla, y hay cientos de plantillas disponibles.

Haz clic en la pestaña Agradecimiento para mostrar solo las plantillas de página de agradecimiento. Luego, pasa el ratón sobre una plantilla que te guste y haz clic en el icono de la marca de verificación para activarla.

Usaremos la 'Página de agradecimiento de pedido completado' para este tutorial.

Después de elegir tu plantilla, introduce un nombre y una URL de página. Luego, haz clic en el botón Guardar y empezar a editar la página.

Paso 3. Personaliza tu página de agradecimiento con ventas adicionales

Ahora puedes empezar a editar tu página de agradecimiento con el constructor de arrastrar y soltar. El editor visual muestra una vista previa en vivo de tu página a la derecha.

Para editar cualquier elemento, haz clic en él y aparecerá un menú de configuración en el lado izquierdo.

El panel izquierdo tiene elementos llamados Bloques que puedes arrastrar y soltar en la página.

Comenzaremos cambiando las fuentes de la página para que coincidan con nuestro tema de WooCommerce. Haz clic en el icono Ajustes globales en la esquina inferior izquierda y expande la pestaña Fuentes.

A continuación, puedes elegir fuentes personalizadas de Google y aplicarlas globalmente. El mismo panel gestiona los colores globales, el fondo y el CSS personalizado.

A continuación, puedes convertir tu página de agradecimiento de WooCommerce en una pantalla posterior a la compra optimizada para la conversión utilizando el constructor de arrastrar y soltar.

Añadir una venta adicional de WooCommerce

Añadir una venta adicional de productos relacionados a tu página de agradecimiento ayuda a aumentar el valor medio del pedido e impulsar más ventas en la tienda.

Así es como se crea una venta adicional en la página de confirmación de pedido de tu tienda.

Haz clic en la pestaña Secciones en el panel izquierdo para abrir una pantalla de secciones de contenido prefabricadas. Selecciona la pestaña Hero, luego la sección Hero 2 haciendo clic en el icono del signo más naranja para insertarla.

Ahora haz clic en el bloque de Imagen en la nueva sección y añade una imagen del producto que deseas vender adicionalmente.

Puedes hacer lo mismo para el título del producto y la descripción del producto.

Ahora añadiremos un nuevo botón de llamada a la acción. Pasa el ratón sobre el botón existente y haz clic en el icono de la papelera para eliminarlo.

A continuación, desplázate hacia abajo hasta los bloques de WooCommerce y arrastra el botón Añadir al carrito. Reemplaza tu antiguo botón por uno que se conecte a tus productos de WooCommerce.

Haz clic en el botón para abrir el panel de configuración, luego introduce el ID del producto. Esto añade automáticamente el artículo al carrito de tu cliente.

Puedes encontrar el ID de tu producto yendo a Productos » Todos los productos desde tu área de administración de WordPress y buscando tu producto.

Después de añadir el ID del producto, activa el interruptor Ir directamente a la caja. El bloque Añadir al carrito más Ir directamente a la caja es la parte que la mayoría de los principiantes se pierden, y es lo que convierte la venta adicional en una compra de un solo toque en lugar de un paso adicional.

También puedes hacer clic en la pestaña Avanzado para personalizar el color del botón, el relleno, la alineación y más.

Ahora añadamos un encabezado para promocionar tu venta adicional. Arrastra el bloque de titular encima de tu venta adicional y añade un titular atractivo para animar a los compradores a comprar.

Añadir una cuadrícula de productos más vendidos

Añadir los productos más vendidos a tu página de agradecimiento es una forma fácil de aumentar las ventas. Como estos productos han demostrado venderse, es probable que tus clientes estén listos para comprarlos.

Para ello, desplázate hasta la sección Bloques de WooCommerce y arrastra la cuadrícula de Productos más vendidos a tu página.

Puedes configurar el bloque para mostrar varios productos, columnas, paginación y más. En la pestaña Avanzado, puedes personalizar los colores de la cuadrícula, el estilo, la alineación y el espaciado.

Hay muchas otras formas de personalizar tu página de agradecimiento con SeedProd, como añadir:

• Productos recientes
• Productos en oferta
• Productos destacados
• Productos mejor valorados

Incluso puedes añadir un temporizador de cuenta atrás para animar a los compradores a aprovechar los artículos en oferta antes de que finalice la promoción.

Recuerda hacer clic en el botón Guardar en la esquina superior derecha para guardar tus cambios.

Paso 4. Publica tu página de agradecimiento de WooCommerce

Cuando estés satisfecho con el aspecto de tu página de confirmación de pedido, puedes publicarla. Haz clic en la flecha desplegable del botón de guardar y selecciona Publicar.

Ahora puedes visitar tu página de agradecimiento para ver cómo queda.

Cómo editar la página de agradecimiento de WooCommerce con código

Si prefieres editar la página nativa de "pedido recibido" en lugar de crear una separada, puedes hacerlo con código. Seré sincero, esta ruta es para desarrolladores, pero mantiene los detalles del pedido en vivo de WooCommerce en su lugar mientras añades tu propio contenido.

La página de agradecimiento en WooCommerce no es una página normal con un shortcode. Se renderiza desde la plantilla thankyou.php en el endpoint de pedido recibido, que se ve como tudominio.com/checkout/order-received/.

Hay dos maneras de cambiar lo que aparece allí:

• El hook woocommerce_thankyou: Añade contenido debajo de la confirmación del pedido sin editar archivos de plantilla. Inserta un fragmento en un plugin de fragmentos de código o en tu tema hijo.
• Una anulación de plantilla: Copia templates/checkout/thankyou.php de WooCommerce en tu tema hijo en woocommerce/checkout/thankyou.php, eliminando la carpeta templates, y luego edita la copia. WooCommerce solo carga tu versión si la ruta coincide exactamente.

El hook es la opción más segura de las dos. Un fragmento corto como este añade un mensaje personalizado debajo de la confirmación:

add_action( 'woocommerce_thankyou', 'custom_thankyou_message' );
function custom_thankyou_message( $order_id ) {
    $order = wc_get_order( $order_id );
    echo '<p>Thanks, ' . esc_html( $order->get_billing_first_name() ) . '! Your order is on its way.</p>';
}

Una cosa a tener en cuenta es que una anulación de plantilla sobrevive a las actualizaciones de plugins, pero no siempre a las actualizaciones de temas, así que edita siempre la copia dentro de un tema hijo. Si editas el archivo original de WooCommerce o tu tema principal, la próxima actualización borrará tus cambios.

Cómo reemplazar la página de agradecimiento predeterminada de WooCommerce

Después de publicar tu página de SeedProd, necesitarás redirigir la página de agradecimiento predeterminada para que los compradores aterricen en tu nueva pantalla en su lugar. La forma más fácil es un plugin de redirección gratuito.

Recomendamos el plugin Thanks Redirect for WooCommerce. Es gratuito en el repositorio de plugins de WordPress y añade la redirección rápidamente. Aquí te explicamos cómo configurarlo:

1. Instala y activa el plugin Thanks Redirect for WooCommerce.
2. Ve a WooCommerce » Ajustes y haz clic en la pestaña Productos.
3. Haz clic en el enlace Thanks Redirect, luego marca la casilla Enable Global Thanks Redirect.
4. Pega la URL de tu nueva página de agradecimiento en el campo Thanks Redirect URL y haz clic en Guardar Cambios.

Una advertencia antes de redirigir: una página de destino completamente separada no contiene los datos del pedido en vivo del cliente, como el número de pedido, los artículos y los totales, a menos que los extraiga dinámicamente. Por lo tanto, la redirección funciona mejor como una pantalla de marketing o de venta adicional. Si los compradores necesitan ver los detalles de su confirmación, mantenga visibles los detalles del pedido o utilice el método de gancho anterior en su lugar.

También puede configurar una página de agradecimiento diferente por producto. El plugin Thanks Redirect tiene una configuración de redirección por producto, y el método de gancho puede ramificarse según el ID del producto en el pedido. Vale la pena hacerlo cuando cada producto requiere una venta adicional diferente.

¿Qué hace que una página de agradecimiento de WooCommerce sea buena?

Las mejores páginas de agradecimiento que he visto hacen varias cosas bien a la vez. Confirman el pedido claramente y luego utilizan la atención restante para dirigir al comprador hacia una próxima acción.

Si desea una página que justifique su lugar, incorpore estos elementos:

• Una confirmación clara: El número de pedido, los artículos y el total, para que el comprador sepa que la compra se realizó.
• Una venta adicional relevante: Un solo producto relacionado junto a la confirmación, no una cuadrícula desordenada que compite por la atención.
• Una razón para volver: Un cupón para el próximo pedido o un enlace a una guía de configuración para lo que acaban de comprar.
• Una indicación para compartir o seguir: Botones sociales que convierten a un comprador en alcance, ya que están en su mejor momento justo después de la compra.

Manténgalo enfocado. Una página de agradecimiento que intenta hacer de todo termina sin convertir nada.

Qué hacer una vez que tu página de agradecimiento esté activa

Construir la página es solo la mitad del trabajo. Una vez que esté activa, configure una forma de medir si realmente está funcionando.

• Rastree la compra: Agregue un evento de compra de GA4 o su píxel publicitario a la página de recepción del pedido para que se registren las conversiones.
• Observe la tasa de aceptación de ventas adicionales: Verifique cuántos compradores agregan el producto de venta adicional y luego pruebe una oferta diferente si es plana.

Comience con el evento de compra. Sin él, está adivinando si algo de esto movió la aguja.

Preguntas frecuentes sobre la página de agradecimiento de WooCommerce

¿Cómo edito la página de agradecimiento de WooCommerce sin un plugin?

Puede editarlo con código. Agregue un fragmento usando el gancho de acción `woocommerce_thankyou` para insertar contenido debajo de la confirmación del pedido, o copie la plantilla `thankyou.php` en su tema hijo y edite la copia.

El método de gancho es más seguro porque sobrevive a las actualizaciones del tema y del plugin. Editar el archivo de plantilla original no lo hace.

¿Cuál es la URL de la página de agradecimiento de WooCommerce?

La página de agradecimiento predeterminada se encuentra en el punto final `order-received`, que se ve como `tudominio.com/checkout/order-received/`. Puede renombrar ese punto final en WooCommerce » Ajustes » Avanzado » Puntos finales de pago.

¿Puedo configurar una página de agradecimiento diferente para cada producto?

Sí. Un plugin de redirección con una configuración por producto puede enviar a los compradores de cada producto a una página diferente. También puede ramificar el gancho `woocommerce_thankyou` según el ID del producto en el pedido.

Vale la pena la configuración adicional cuando cada producto necesita una venta adicional o un seguimiento diferente.

¿Los clientes seguirán viendo los detalles de su pedido en una página de agradecimiento personalizada?

Solo si los mantienes. Una redirección a una página separada descarta los datos del pedido en vivo a menos que los obtengas dinámicamente.

Si los detalles de confirmación son importantes, usa el hook o el método de plantilla en la página nativa de pedido recibido, o mantén el bloque de detalles del pedido de WooCommerce en tu página personalizada.

Comienza a personalizar tu página de agradecimiento de WooCommerce

Ahora tienes una página de agradecimiento personalizada de WooCommerce que convierte una simple confirmación en una pantalla que vende. Con SeedProd, puedes crearla sin código y tenerla lista en una tarde.

¿Quieres seguir mejorando tu tienda WooCommerce? Consulta estos tutoriales a continuación:

• Cómo controlar los productos relacionados en WooCommerce
• Cómo asegurar tu sitio WooCommerce
• Cómo ocultar productos sin stock en WooCommerce
• Personalizar la pestaña "Información adicional" en WooCommerce
• Cómo solucionar que la vista del carrito de WooCommerce no funcione
• Cómo cambiar el título de la página de tienda en WooCommerce
• Mejorar la galería de imágenes de tus productos en WooCommerce
• Cómo añadir valoraciones de estrellas a los productos de WooCommerce

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.