Servicio no estará disponible el viernes 22 mayo, 9–18h CDMX (17–02h ESP) · migración a nueva plataforma

Página ‘gracias’ personalizada en WooCommerce

Como crear una página de "gracias" personalizada en WooCommerce

En este tutorial te mostraremos como crear una página de «gracias» totalmente personalizada en WooCommerce. En nuestra comunidad, ha sido un tutorial muy demandado, pues nos permite crear una página personalizada al momento de que el resultado de una compra hecha con el sistema de tiendas online con WooCommerce resulte positiva. Siendo que en esta página de «gracias» personalizada, podamos colocar información relevante para el usuario, y dándole los estilos que queramos.

Esta sería una página estándar de «gracias» de WooCommerce

pagina estandar de gracias de woocommerce

Y así quedaría una página de «gracias» de WooCommerce personalizada.

página de gracias personalizada de woocommerce-min

De esta manera, conseguiremos personalizar el resultado de compra de cualquier tienda online con WooCommerce, de forma sencilla, y lo mejor, usando un plugin gratuito, y todo el poder del Divi Builder.

¿Por qué personalizar la página de gracias en WooCommerce?

La página de «gracias» (thank you page) que aparece después de una compra exitosa es uno de los espacios más desaprovechados en una tienda WooCommerce. Por defecto, WooCommerce muestra una página plana con el resumen del pedido — funcional, pero con cero magia para fortalecer la relación con el cliente que acaba de comprarte.

Una página de gracias bien diseñada puede:

  • Reforzar la decisión del cliente: confirmar que tomó una buena decisión reduce la «compra-arrepentimiento».
  • Iniciar el onboarding: para productos digitales o servicios, dar instrucciones claras sobre qué pasa ahora (descarga, recepción, primer paso).
  • Cross-sell y upsell post-compra: el cliente está en máximo modo «comprador» — el momento perfecto para ofrecer productos complementarios.
  • Pedir reseñas o referidos: si tu cliente acaba de comprar y está contento, es el momento para pedirle una review o que recomiende tu marca.
  • Trackear conversiones correctamente: la página de gracias es el punto natural para disparar pixel de Facebook, GA4, Google Ads y tracking de marketing.

Si construyes tu tienda con Divi 5 + WooCommerce o el curso completo de WooCommerce con Divi, personalizar la página de gracias es uno de los pasos finales del setup que más impacto tiene en LTV (lifetime value) del cliente.

Pasos clave para diseñar tu página de gracias con Divi

  1. Instala el plugin de integración con Divi (link en la zona prémium de este post). Te permite maquetar la página de gracias completamente con el Divi Builder usando shortcodes dinámicos del pedido.
  2. Crea una página dedicada en Divi Theme Builder para el endpoint order-received (la URL post-compra de WooCommerce). Esto te da control total sobre el layout sin tocar templates de WC.
  3. Diseña la sección hero de bienvenida. Logo de la tienda + un mensaje grande y cálido tipo «¡Gracias por tu compra, [nombre]!». Usa el shortcode dinámico que extrae el nombre del comprador del pedido — personalización real, no un saludo genérico.
  4. Muestra el resumen del pedido con estilo. En lugar de la tabla plana de WooCommerce, usa columnas de Divi: a la izquierda los productos comprados con imagen y nombre, a la derecha el desglose de precios (subtotal, envío, impuestos, total). Color de fondo gris claro (F4F5F6) ayuda a destacar la sección sin sobrecargarla.
  5. Añade información de contacto y tracking. Email de soporte visible, número de pedido en grande, link al área de seguimiento si vendes productos físicos.
  6. Sección de «Próximos pasos» o «Qué esperar». Si vendes producto físico: tiempo estimado de envío. Si vendes digital: link de descarga + cómo acceder. Si vendes servicio: cuándo te contactarás.
  7. Cross-sell o upsell estratégico. Al final de la página, una sección con productos complementarios o el siguiente curso/servicio que tiene sentido. Puedes implementarlo con un carrusel de productos en WooCommerce + Divi que muestre 4-6 ítems relacionados.
  8. CTA final para social o referidos. «¿Te gustó tu compra? Compártela con un amigo y obtén 10% de descuento en tu próxima orden». Convertir un comprador en embajador es la conversión más rentable que existe.

Tips de UX para que la página de gracias convierta más

  • Mensaje cálido y humano, no corporativo. «Gracias por confiar en nosotros, [nombre]. Tu pedido ya está en proceso» funciona mejor que «Su pedido número #12345 ha sido recibido satisfactoriamente».
  • Sombras sutiles, no agresivas. Cuando uses fondos grises para destacar el resumen del pedido, evita sombras fuertes — quedan mal sobre fondos claros. Mejor un borde fino o un padding mayor.
  • Mobile primero. El 60-70% de las compras se completan en mobile. Verifica que el layout fluya bien en pantallas chicas: imágenes que no rompan, texto legible, botones suficientemente grandes.
  • Integra con funnels de venta. Si construyes un sistema de upsell post-compra avanzado, el curso de Funnels de Venta con WPFunnels te enseña a crear flujos de «one-click upsell» desde la página de gracias.
  • Trackea con tag manager. No metas pixels duros en el código del template. Usa Google Tag Manager para disparar Pixels y eventos de conversión — más limpio y mantenible.

Casos especiales según tipo de producto

  • Membresías y suscripciones: la página de gracias debe enfocarse en mostrar cómo acceder al área de miembros, qué beneficios obtienen, y cuándo se renueva. Mira nuestro curso de Membership Site con WooCommerce.
  • Productos digitales: link de descarga inmediata + recordatorio de que también se envió por email. La fricción de «no encuentro mi compra» es real.
  • Servicios o consultorías: deja claro cuándo y cómo se contactarán. Idealmente con un calendario integrado para que el cliente reserve su sesión inmediatamente. Mira nuestro post sobre integrar Calendly en WordPress.
  • Productos físicos: tracking number visible + tiempo estimado + qué hacer si el paquete tarda más de N días.

Preguntas frecuentes

¿Funciona con Divi 5?

Sí. El plugin se ha actualizado para Divi 5 y la mecánica de Theme Builder + shortcodes dinámicos de WooCommerce funciona igual. Si vas a actualizar, mira nuestra guía para migrar de Divi 4 a Divi 5.

¿Puedo crear distintas páginas de gracias según el producto?

Sí, con condicionales en Divi Theme Builder puedes mostrar distintos templates según la categoría del producto comprado. Por ejemplo: una página de gracias para cursos, otra para membresías, otra para productos físicos.

¿Afecta el flow de checkout?

No. La página de gracias se muestra solo después de que la transacción se completó. No interfiere con el proceso de pago ni la confirmación de la orden.

¿Puedo usar el mismo template para suscripciones recurrentes?

Sí, pero te recomiendo personalizar el mensaje para los renewals (renovaciones) — el cliente ya pasó por el primer thank you, así que mostrar el mismo mensaje cada mes se siente repetitivo. Usa condicional para detectar si es primera compra o renovación.

¿Cómo combino esto con email marketing post-compra?

La página de gracias da el primer punto de contacto inmediato. Después, una secuencia de emails automáticos (gracias + onboarding + reseña + cross-sell) cierra el ciclo. Para automatizar todo el flow mira nuestro Mastery en Automatización con IA.

¿Listo para mejorar tu página de gracias?

El plugin y el layout completo de Divi para usar como base están más abajo en la zona prémium. Si todavía no eres prémium, empieza tu suscripción y desbloquea cientos de recursos. Para optimización completa de tienda, mira el curso completo de WooCommerce con Divi.

Podrás encontrar el enlace al plugin y el layout para descarga de este tutorial acá abajo siendo suscriptor prémium 👇

Artículos relacionados

Comentarios

  1. Buenas tardes, estoy me podría servir para personalizar la pagina de pago aceptado después de procesarlo en la pasarela de pago? O no se si tienen algún tutorial sobre personalizar estas paginas aquí en la plataforma?

    1. Que tal Robert, así es, esta te sirve para personalizar la página de pago aceptado, sin embargo, también aplicaría para cuando el usuario paga con otra forma de pago. Es decir, aplica para todos los pagos exitosos en la tienda, sean manuales o automáticos.

    1. Que tal Robert, en realidad no, porque no existe una página de pago «no aceptado», cuando un pago no se procesa correctamente en WooCommerce, el mensaje aparece en la misma página de checkout o finalizar compra, y nunca pasa a una página de pago exitoso, es por ello que no se personaliza una página de pago «no aceptado».