Skip to main content
WooCommerce

Cómo personalizar una página de agradecimiento de WooCommerce

By julio 12, 2022No Comments6 min read

La página de agradecimiento, también conocida como página de confirmación de la compra, es una parte a menudo descuidada de muchos sitios web de comercio electrónico. Dado que su función principal es informar a los clientes de que su compra ha sido satisfactoria, los propietarios de las tiendas a veces prestan poca atención, siempre y cuando se muestre un mensaje de éxito de algún tipo.

Pero la página de agradecimiento puede aportar mucho más valor para usted y sus clientes si dedica algún tiempo a optimizarla.

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

Aunque su página de agradecimiento pueda parecer una parte pequeña de su sitio web, cada punto del recorrido del cliente es una oportunidad para proporcionar al comprador más valor y aumentar los ingresos de su tienda. Los estudios han demostrado que es mucho menos costoso retener a los clientes existentes que encontrar nuevos. Si alguien llega a su página de agradecimiento, significa que ya ha realizado una compra. Y como es más probable que haga otra, es una gran oportunidad para guiarle en esa dirección. Todo lo que cuesta es un poco de esfuerzo por adelantado y esta nueva mejora de su tienda irá a trabajar para usted todos los días.

Además, la página de agradecimiento es un lugar seguro para mostrar ofertas a sus clientes en lugar de enviarlas en correos electrónicos transaccionales, en los que tal vez quiera limitar la cantidad de contenido promocional.

Estas son algunas formas de utilizar las páginas de agradecimiento personalizadas para mejorar su tienda:

  • Incluye información importante relacionada con el pedido. Añada una estimación del tiempo de entrega para que los clientes tengan una idea de cuándo recibirán su pedido. O incluya enlaces a guías de productos, vídeos de incorporación, preguntas frecuentes u otros documentos de asistencia. Esto ayudará a gestionar las expectativas, a proporcionar la información necesaria y a reducir las solicitudes de asistencia.
  • Comparte ofertas especiales. Incluya cupones que los clientes puedan utilizar en su próximo pedido y sugiera productos relacionados o productos afiliados.
  • Recuerde a los clientes los puntos de fidelidad, las recompensas o el estado de la suscripción. Con WooCommerce Points and Rewards, los clientes pueden ganar puntos por sus compras, registros de cuentas y reseñas. La página de agradecimiento es un buen lugar para recordarles los puntos que han ganado, lo cerca que están de su canje y las formas de ganar más. Si vende suscripciones o membresías, la página de agradecimiento presenta una gran oportunidad para sugerir actualizaciones de planes o recordar a los clientes si su método de pago recurrente está a punto de expirar.

Hay varias formas de personalizar tu página de agradecimiento. Los métodos manuales incluyen la codificación de una plantilla de página personalizada, el uso de ganchos de WooCommerce a través del archivo functions.php de tu tema y la adición de estilos personalizados a la hoja de estilos de tu tema hijo. Si no te sientes cómodo con la codificación, puedes utilizar un plugin que te permita personalizar tu página de agradecimiento.

La página de agradecimiento por defecto de WooCommerce

El estilo de su página de agradecimiento puede diferir según el tema que haya instalado. Incluso puede que ya utilice páginas de agradecimiento personalizadas. Sin embargo, lo que ves a continuación es el contenido por defecto incluido con los estilos aplicados del tema Sinatra:

Cómo personalizar una página de agradecimiento de WooCommerce

Como puede ver, el contenido es relativamente básico. El número de pedido, la fecha, el correo electrónico del cliente, el total, la forma de pago, los productos comprados y la información de facturación se incluyen por defecto. Vamos a explorar algunas formas de añadir algunas personalizaciones básicas para mejorar la página de agradecimiento.

Uso de una extensión para personalizar la página de agradecimiento de WooCommerce

Si el proceso de personalizar manualmente su página de agradecimiento le parece tedioso, o simplemente no se siente cómodo indagando en el código, existen extensiones que pueden hacer el trabajo pesado de crear páginas de agradecimiento personalizadas por usted.

La extensión de páginas de agradecimiento personalizadas le permite crear múltiples páginas de agradecimiento que se muestran de forma condicional en función de los productos que se han comprado. Estas páginas de agradecimiento personalizadas pueden mostrar títulos y descripciones únicas, información de facturación y envío, ventas cruzadas, ventas adicionales y cualquier otra cosa que desee añadir. Como estas son páginas reales y no generadas dinámicamente, puedes añadir cualquier código corto de WooCommerce o del tema, incrustar vídeo y añadir texto personalizado.

Sólo tienes que crear y dar formato a tus páginas de agradecimiento y elegir cuál quieres que se muestre en la sección Datos del producto para cada producto.

Incluso puede mostrar varias páginas de agradecimiento para un mismo producto u optar por una única página de agradecimiento que se muestre en función de la prioridad. Si un cliente compra varios productos en un pedido que tienen cada uno su propia página de agradecimiento asignada, la página con el número de prioridad más bajo será la que se muestre.

Otra opción para crear páginas de agradecimiento personalizadas es la extensión Custom Thank You and Success Pages. Tiene características similares a la extensión de páginas de agradecimiento personalizadas, pero también tiene la capacidad de mostrar páginas de agradecimiento basadas en el rol del usuario o en las categorías y mostrar botones integrados para compartir en redes sociales.

Crear manualmente una página de agradecimiento personalizada de WooCommerce

En esta sección, discutiremos tres maneras diferentes de personalizar manualmente su página de agradecimiento de WooCommerce.

Antes de empezar, asegúrate de que estás usando un tema hijo en lugar de un tema padre. No sobrescribas directamente los archivos de WooCommerce o de tu tema padre, ya que estos archivos se sobrescribirán en futuras actualizaciones.

Si no estás familiarizado con el código abierto y con la resolución de posibles conflictos en WordPress y/o WooCommerce contacta conmigo sin compromiso para ayudarte.

Cómo codificar una plantilla de página de agradecimiento de WooCommerce

Paso 1: Descargue el archivo de plantilla de la página thankyou.php

Utiliza un cliente SFTP o el cPanel de tu proveedor de alojamiento para acceder a los archivos de tu sitio y navega hasta wp-content/plugins/woocommerce/templates/checkout. Descargue el archivo thankyou.php en su máquina local o ordenador.

Paso 2: Edite el archivo thankyou.php con su código personalizado

Abre thankyou.php en el programa de edición de texto que prefieras. Puedes utilizar el Bloc de notas (Windows) o TextEdit (Mac), pero asegúrate de que estás editando en modo de texto plano. Mejor aún, utiliza un software de edición de texto gratuito diseñado específicamente para la codificación como Atom.io. Atom.io es un editor de texto multiplataforma que funciona en los sistemas operativos Windows, Mac OS y Linux.

Para este ejemplo, cambiaremos el texto «Gracias. Su pedido ha sido recibido» por «¡Gracias por hacer un pedido con nosotros!». También añadiremos información sobre el envío y haremos algunos cambios de estilo para llamar la atención visualmente sobre esta importante información.

Código original:

Este es el código por defecto que editaremos en la plantilla del tema hijo.

Código de sustitución:

Este es el código que utilizaremos en nuestra nueva página de agradecimiento personalizada.

Ahora suba su archivo thankyou.php modificado a la carpeta woocommerce/checkout del tema hijo.

Personalizaciones CSS

Observe que hemos añadido una nueva clase p llamada .thankyou-note. En el archivo style.css de nuestro tema hijo, vamos a añadir algunas personalizaciones a la clase p.woocommerce-notice ya existente y a añadir estilos a la nueva clase p.thankyou-note de la siguiente manera:

.woocommerce-checkout p.woocommerce-notice { font-size: 20px; font-weight: 800; color: #3857F1; } .woocommerce-checkout p.thankyou-note { margin-bottom: 40px; padding: 0 0 5px 20px; border-left: solid 5px #c4401c; }

Guarde su hoja de estilo y vuelva a cargarla con estas personalizaciones en la carpeta de su tema hijo.

Ahora debería tener una página de agradecimiento con este aspecto:

pagina-de-gracias-woocommerce

Personalizar la plantilla de la página de agradecimiento de WooCommerce con ganchos

También puedes utilizar los ganchos de WooCommerce en el archivo functions.php de tu tema hijo para añadir o eliminar contenido de tu página de agradecimiento. Si no estás familiarizado con los hooks de WooCommerce, revisa la documentación de WooCommerce. Para obtener una lista completa, consulte la página de referencia de los ganchos de acción y filtro de WooCommerce.

Para este ejemplo, utilizaremos un gancho para añadir un cupón especial para pedidos superiores a 100 dólares que aparecerá debajo de la sección de dirección de facturación.

En el archivo functions.php de nuestro tema hijo, añadiremos el siguiente código:

add_action( ‘woocommerce_thankyou’, ‘coupon_thankyou’, 10, 2 ); function coupon_thankyou( $order_id ) { $order = wc_get_order( $order_id ); $total=0; foreach ( $order->get_items() as $item_key => $item ) { $item_data = $item->get_data(); $item_total = intval( $item_data[‘total’] ); $total += $item_total; } if ( $total>100 ) { echo «

Congrats! Get 50% off your next purchase!

As a special thanks for spending over $100 with us today, we’d like to give you 50% off your next order of any full priced items in our store.

Use code [ 50special ] on your next order.

«; } }

Guarde los cambios y suba el archivo revisado a la carpeta de su tema hijo.

Personalizaciones CSS

Ten en cuenta que hemos añadido algunas clases CSS nuevas en la acción anterior: la clase de sección .woocommerce-thankyou-coupon, una clase div llamada .tybox y una clase de código llamada .tycoupon. Como se trata de un cupón especial, queremos llamar la atención sobre él y añadir estilos únicos que le ayuden a destacar del resto de la página de agradecimiento. Añadiremos estos estilos a las nuevas clases personalizadas en el archivo style.css del tema hijo como sigue:

.woocommerce .woocommerce-thankyou-coupon div.tybox { border: dashed 13px; border-radius: 3px; border-color: rgba(110,110,110,.2); padding: 12px 20px; background: rgb(176,34,195); background: linear-gradient(0deg, rgba(176,34,195,0.30) 0%, rgba(253,214,45,0.30) 100%); } .woocommerce .woocommerce-thankyou-coupon { margin-bottom: 2em; } code.tycoupon { font-size: 18px; font-weight: 800; }

Vuelva a cargar la hoja de estilo del tema hijo con estas personalizaciones en la carpeta de su tema hijo. El resultado debería ser el siguiente:

Independientemente del método que decidas utilizar para personalizar tu página de agradecimiento de WooCommerce, debes tomarte el tiempo necesario para desarrollar una estrategia que te proporcione el mejor rendimiento de tus esfuerzos. Dependiendo del tipo de negocio que tengas, puedes centrarte en recompensas o puntos de fidelidad, cupones o información detallada de incorporación.

Aunque las páginas de agradecimiento personalizadas son sólo una parte del gran rompecabezas que es el crecimiento de su negocio, son una oportunidad única para proporcionar información útil y mensajes de marketing específicos que le ahorran y le hacen ganar dinero.

¡Soy Mihai Dobre! Diseñador web freelance experto en diseño de tiendas online con Shopify y WooCommerce. A los 30 años, fundé mi primera empresa de hosting con una facturación de 35.000 libras en el primer año. Hoy, tras más de 7 años de experiencia trabajando con Shopify & WordPress y WooCommerce puedo ofrecer más servicios y ayudar a más empresas y particulares a conseguir más ventas y clientes en el Reino Unido & España.