Cómo personalizar los correos electrónicos de los pedidos de WooCommerce

Los correos electrónicos de pedidos de WooCommerce suelen ser actualizaciones rutinarias. Pero también le dan a tu negocio una línea directa con tus clientes. Cada correo electrónico te permite generar confianza, reforzar tu marca y crear una impresión duradera que hace que los clientes vuelvan.

Por desgracia, las plantillas de correo electrónico predeterminadas de WooCommerce no tienen el impacto que la mayoría de las empresas desean. Su diseño genérico y sus limitadas opciones de personalización las hacen parecer impersonales y no representan la identidad única de tu marca. Sin personalización, pierdes la oportunidad de conectar con tus clientes de forma significativa.

Afortunadamente, puedes personalizar los correos electrónicos de los pedidos de WooCommerce para que destaquen. Y hay varias formas de hacerlo. Utiliza la configuración integrada, confía en los plugins o escribe código personalizado. Independientemente de la opción que elijas, puedes diseñar correos electrónicos que tengan un aspecto profesional y ofrezcan una mejor experiencia general al cliente.

Este artículo te muestra cómo hacer que tus correos electrónicos pasen de ser básicos a excepcionales. Incluimos soluciones basadas en plugins para obtener resultados rápidos y opciones de código personalizado para un control total.

¡Empecemos!

Configuración predeterminada del correo electrónico de WooCommerce que debes conocer

WooCommerce incluye un conjunto de plantillas de correo electrónico estándar diseñadas para gestionar las principales interacciones con los clientes, como confirmaciones de pedidos, actualizaciones de envío y reembolsos. Estas plantillas utilizan marcadores de posición para insertar dinámicamente detalles del pedido como nombres de clientes, información del producto y precios. Aunque estos correos electrónicos incorporados incluyen lo básico y sin duda proporcionan información relevante a tus clientes, dejan mucho que desear en términos de diseño y marca.

Las plantillas de correo electrónico predeterminadas de WooCommerce siguen un diseño sencillo y funcional. Presentan diseños sencillos, esquemas de color mínimos y un formato de contenido básico. Aunque este enfoque garantiza la compatibilidad con la mayoría de los clientes de correo electrónico, también limita tu capacidad para crear una experiencia memorable para el cliente. Los correos electrónicos no reflejan el estilo único de tu marca ni ofrecen mucha flexibilidad para añadir toques personalizados.

Estas limitaciones hacen que sea difícil destacar en las bandejas de entrada de tus clientes, especialmente en mercados competitivos. Por eso es tan importante personalizar los correos electrónicos de WooCommerce. Te permite mejorar tus comunicaciones y crear una conexión más fuerte con tu público.

Vamos a explorar cómo puedes personalizar estas plantillas utilizando el panel de configuración integrado de WooCommerce.

Cómo personalizar los correos electrónicos de pedidos de WooCommerce utilizando el panel de configuración

WooCommerce proporciona opciones de personalización integradas que te permiten realizar ajustes rápidos en tus correos electrónicos de pedido sin necesidad de plugins ni código personalizado. Estos ajustes son accesibles a través de tu panel de control de WordPress y se centran en elementos de marca como tu logotipo, colores y texto básico. Aunque estas opciones son un buen punto de partida, tienen limitaciones que pueden dejarte con ganas de más.

Acceder al panel de configuración

Para empezar, ve a WooCommerce > Configuración > Correos electrónicos en tu panel de control de WordPress. Desde aquí, verás una lista de tipos de correo electrónico como Nuevo pedido, Pedido cancelado y Pedido completado. Todos ellos son correos electrónicos diferentes que WooCommerce te envía a ti o a tus clientes, dependiendo de la situación.

Haz clic en el botón Gestionar en cualquier tipo de correo electrónico para personalizar detalles específicos, pero para el diseño general del correo electrónico, desplázate hacia abajo después de estos correos para llegar a las opciones de plantilla.

Opciones de personalización disponibles

Una vez que te desplaces hasta el encabezado Plantilla de correo electrónico, podrás realizar algunos cambios en el aspecto de la plantilla de correo electrónico predeterminada.

Aquí puedes personalizar atributos como el color principal del correo electrónico, el color de fondo y el color del cuerpo del texto. Estos pequeños cambios pueden ayudar a que tus correos electrónicos coincidan con el esquema de colores de tu marca. Es decir, al menos los emails se verán coherentes con el diseño de tu sitio web.

También puedes personalizar la imagen de la cabecera y el texto del pie de página, donde podrías incluir un eslogan, el nombre de la empresa o información de contacto. Estos pequeños cambios pueden hacer que tus correos electrónicos parezcan más profesionales y personalizados.

Limitaciones de los ajustes integrados

Aunque estas herramientas hacen posible una personalización básica de la marca, no te dan un control creativo total. Por ejemplo:

• El diseño de los correos electrónicos permanece fijo, por lo que no puedes reorganizar elementos ni añadir nuevas secciones.
• Las fuentes no se pueden personalizar más allá de los estilos predeterminados que utiliza tu sitio web.
• No es posible incluir elementos dinámicos como recomendaciones de productos o enlaces de venta adicional (upsell).

Estas limitaciones hacen que el panel de configuración sea una buena opción para pequeños detalles, pero no es tan recomendable para empresas que quieren ofrecer una experiencia de marca. Y olvídalo si tu objetivo es la interactividad.

Utilizar plugins o extensiones para la personalización avanzada de los correos electrónicos de los pedidos de WooCommerce

Si la configuración integrada de WooCommerce no ofrece la flexibilidad que necesitas, los plugins o las extensiones de WooCommerce pueden ayudarte a crear correos electrónicos de pedidos atractivos y personalizados con funcionalidades avanzadas. Esta opción puede ayudarte a no limitarte a la marca básica, sino a crear diseños personalizados e incluir elementos dinámicos como enlaces de ventas adicionales y recomendaciones de productos.

Los plugins también presentan algunos retos. Algunos plugins pueden crear conflictos con otras extensiones, plugins o temas de WooCommerce, causando problemas de funcionalidad.

A veces, las actualizaciones de WooCommerce o WordPress también pueden romper la funcionalidad de los plugins. Además, si algo va mal, depurar los problemas de los plugins puede llevar mucho tiempo, sobre todo si no estás familiarizado con este tipo de resolución de problemas.

Aquí tienes tres plugins y extensiones populares para personalizar los correos electrónicos de los pedidos de WooCommerce, junto con sus principales características:

1. Email Customizer for WooCommerce

La extensión Email Customizer for WooCommerce añade a WooCommerce un editor de arrastrar y soltar para personalizar los diseños de los correos electrónicos. Puedes añadir elementos como logotipos, texto, imágenes y botones, dándote un control total sobre el diseño de tu correo electrónico.

Entre sus principales características se incluyen plantillas prediseñadas, opciones para incluir contenido personalizado como ofertas de venta o mensajes personalizados, y previsualizaciones en tiempo real para que puedas ver los cambios a medida que los realizas.

2. Kadence WooCommerce Email Designer

El plugin Kadence WooCommerce Email Designer ofrece una forma sencilla de diseñar correos electrónicos más bonitos. Funciona bien con WooCommerce y te permite editar fuentes, colores y diseños.

Algunas funcionalidades destacables son la previsualización en tiempo real del correo electrónico para comprobar tus cambios, la personalización súper sencilla de la cabecera, el pie de página y el cuerpo del contenido, y la compatibilidad con la importación o exportación de diseños para reutilizarlos en diferentes sitios.

3. YITH WooCommerce Email Templates

El plugin YITH WooCommerce Email Templates se centra en proporcionar una biblioteca de plantillas de correo electrónico diseñadas profesionalmente. Es ideal si quieres un aspecto pulido sin dedicar horas al diseño. Ofrece una gran variedad de estilos de plantilla entre los que elegir, opciones para incluir iconos de redes sociales, marca y contenido dinámico, y funciona bien junto con otras extensiones de WooCommerce

Cómo personalizar los correos electrónicos de los pedidos de WooCommerce con un plugin

Para este tutorial, vamos a utilizar el plugin Kadence WooCommerce Email Designer como ejemplo. A continuación te explicamos cómo instalar y utilizar el plugin para personalizar tus correos electrónicos:

Instala y activa el plugin

Ve a tu panel de WordPress y navega hasta Plugins > Añadir nuevo. Busca Email Customizer for WooCommerce, haz clic en Instalar Ahora y activa el plugin.

Personaliza las plantillas de correo electrónico

Ve a WooCommerce > Personalizador de correo electrónico en tu panel de control. Utiliza el editor para personalizar el diseño de tu correo electrónico. Puedes añadir elementos de marca como tu logotipo, cambiar los colores para que coincidan con tu marca e incluir texto personalizado. También puedes seleccionar una plantilla prediseñada.

Añade elementos dinámicos

Incluye enlaces de venta adicional (upsell) para incentivar compras recurrentes. Por ejemplo, puedes añadir un botón que promocione productos relacionados.

En este punto, también puedes insertar pruebas sociales, como reseñas de clientes o insignias de confianza, para crear credibilidad.

Guarda y prueba tus correos electrónicos

Guarda tu diseño de correo electrónico personalizado y utiliza la herramienta de vista previa integrada para comprobar cómo queda. Prueba los correos enviándotelos a ti mismo para asegurarte de que todo se muestra correctamente. Para ello, haz clic en Enviar email de prueba en la parte inferior del personalizador.

Los plugins ofrecen una potente forma de mejorar los correos electrónicos de tus pedidos, pero si te encuentras con frecuentes problemas de compatibilidad, el código personalizado puede ser una solución más fiable a largo plazo.

A continuación, exploraremos cómo personalizar los correos electrónicos de WooCommerce utilizando código personalizado para obtener el máximo control.

Cómo personalizar los correos electrónicos de pedidos de WooCommerce con código personalizado

Si necesitas un control total sobre los correos electrónicos de los pedidos de WooCommerce, el código personalizado es el camino a seguir. A diferencia de los plugins, que se basan en funciones preconfiguradas (que podrían dejarte un poco encorsetado), la programación te da la libertad de diseñar correos electrónicos que encajen perfectamente con tu marca e incluyan funciones específicas para tu negocio. También es una solución más escalable, ya que no estás atado a software de terceros que podría volverse incompatible o anticuado con el tiempo.

Tendrás que trabajar con los hooks y plantillas integradas de WooCommerce para crear correos electrónicos personalizados. Al hacerlo, podrás personalizar todos los aspectos de tus correos electrónicos, desde la cabecera y el pie de página hasta elementos dinámicos basados en datos, como recomendaciones de productos personalizadas. ¿Y el resultado final?

Una experiencia de correo electrónico totalmente personalizada que refleja tu marca y mantiene a tus clientes comprometidos. Empecemos con un ejemplo básico.

Ejemplo básico de email de pedido de WooCommerce basado en código

WooCommerce ofrece varios hooks y filtros que puedes utilizar para personalizar el contenido de tus correos electrónicos. Por ejemplo, puedes hacer hook en los filtros woocommerce_email_headers y woocommerce_email_footer para modificar las cabeceras de los correos electrónicos, los pies de página o cualquier otra cosa que quieras hacer.

Aquí tienes un ejemplo rápido de cómo añadir un pie de página personalizado a los correos electrónicos de tus pedidos:

add_filter('woocommerce_email_footer_text', 'custom_email_footer_text');
function custom_email_footer_text( $footer_text ) {
    $footer_text = 'Thank you for shopping with us! Check out our latest deals at <a href="https://yourwebsite.com">yourwebsite.com</a>.';
    return $footer_text;
}

Puedes añadir ese fragmento al archivo functions.php de tu tema hijo.

Mejorar el diseño utilizando HTML y CSS para un diseño preciso del correo electrónico

Si quieres que tus correos electrónicos tengan un aspecto pulido y visualmente atractivo, editar las plantillas de correo electrónico de WooCommerce utilizando HTML y CSS es una gran opción. WooCommerce almacena sus plantillas de correo electrónico en la carpeta de tu tema woocommerce/email. Si modificas estas plantillas, puedes ajustar la disposición, la tipografía y el diseño para crear correos electrónicos que tengan sentido para tu tienda.

Por ejemplo, para añadir una cabecera personalizada al correo electrónico «Pedido completado por el cliente», puedes editar el archivo customer-completed-order.php situado en la carpeta woocommerce/emails.

Aquí te explicamos cómo:

En primer lugar, copia el archivo customer-completed-order.php en la carpeta woocommerce/emails de tu tema. Esto garantiza que tus cambios no se sobrescriban durante las actualizaciones de WooCommerce.

A continuación, añade tu contenido de cabecera personalizado en la parte superior del archivo.

Por ejemplo, podrías añadir algo como esto

<div style="background-color: #FFFF44; padding: 20px; text-align: center;">
    <img src="https://yourwebsite.com/logo.png" alt="Your Logo" style="max-width: 150px;">
    <h2 style="font-family: Arial, sans-serif; color: #333;">Your Order is Complete!</h2>
</div>

Este fragmento de código añade tu logotipo en la parte superior central del correo electrónico y añade un color de fondo amarillo a la zona de la cabecera:

Los clientes de correo electrónico a menudo eliminan los estilos externos, por lo que es importante utilizar CSS inline por motivos de compatibilidad. Esto garantiza que tu diseño sea coherente en todos los dispositivos y plataformas de correo electrónico.

Mejorar tus correos electrónicos con HTML y CSS te da un control preciso sobre su apariencia. Sólo tienes que asegurarte de que tus diseños son aptos para móviles, utilizando elementos responsivos como anchos basados en porcentajes y media queries cuando sea necesario.

Añadir elementos dinámicos a los correos electrónicos de pedidos de WooCommerce

Los elementos dinámicos pueden hacer que tus correos electrónicos de pedidos de WooCommerce sean aún más atractivos. Al hacerlo, se vuelven más personalizados y, en algunos casos, tienen funcionalidades interactivas. Los hooks y filtros de WooCommerce facilitan la inclusión de estos elementos directamente en tus plantillas de correo electrónico y crean oportunidades para impulsar la participación.

Ejemplo: Añadir recomendaciones personalizadas de productos

Puedes utilizar los hooks de WooCommerce para incluir recomendaciones de productos relacionados o de venta adicional que sean específicas para el pedido de cada cliente. Por ejemplo, podrías mostrar productos complementarios basados en los artículos de su carrito.
Para empezar, añade el contenido dinámico utilizando un hook, como el siguiente:

add_action('woocommerce_email_after_order_table', 'add_related_products_to_email', 10, 4);
function add_related_products_to_email( $order, $sent_to_admin, $plain_text, $email ) {
    if ( $email->id === 'customer_completed_order' ) {
        echo '<h3 style="font-family: Arial, sans-serif;">You might also like:</h3>';
        // Loop through order items
        foreach ( $order->get_items() as $item ) {
            $product_id = $item->get_product_id();
            // Get related products
            $related_products = wc_get_related_products( $product_id, 2 ); // Fetch 2 related products
            foreach ( $related_products as $related_id ) {
                $related_product = wc_get_product( $related_id );
                if ( $related_product && $related_product->is_visible() ) {
                    echo '<p style="font-family: Arial, sans-serif;">
                        <a href="' . esc_url( $related_product->get_permalink() ) . '">' . esc_html( $related_product->get_name() ) . '</a>
                    </p>';
                }
            }    
        }
    }
}

Este fragmento hace hook a la acción woocommerce_email_after_order_table para mostrar productos relacionados debajo de los detalles del pedido en el correo electrónico «Pedido completado» del cliente.

Ejemplo: Añadir un enlace dinámico de solicitud de opinión

Anima a los clientes a dejar una opinión incrustando un enlace personalizado en el correo electrónico. Por ejemplo:

add_action('woocommerce_email_footer', 'add_review_request_to_email');

function add_review_request_to_email() {
    // Safely output HTML for the review request
    echo '<p style="text-align: center; font-family: Arial, sans-serif;">
            We'd love your feedback! <a href="' . esc_url('https://yourwebsite.com/review') . '">Leave a review here</a>.
          </p>';
}

Este fragmento añade una sencilla llamada a la acción en el pie de página del correo electrónico, invitando a los clientes a compartir sus opiniones.

Ejemplo: Insertar botones de redes sociales

También puedes incluir botones de redes sociales para conectar con los clientes más allá del correo electrónico. Añade el siguiente código para mostrar iconos clicables en el pie de página de tu correo electrónico:

add_action('woocommerce_email_footer', 'add_social_media_links');

function add_social_media_links() {
    // Safely output HTML for social media links
    echo '<div style="text-align: center; margin-top: 20px;">
            <a href="' . esc_url('https://facebook.com/yourbusiness') . '" style="margin-right: 10px;">
                <img src="' . esc_url('https://yourwebsite.com/facebook-icon.png') . '" alt="Facebook" style="width: 20px;">
            </a>
            <a href="' . esc_url('https://instagram.com/yourbusiness') . '">
                <img src="' . esc_url('https://yourwebsite.com/instagram-icon.png') . '" alt="Instagram" style="width: 20px;">
            </a>
          </div>';
}

Cómo probar tus personalizaciones

Después de personalizar tus correos electrónicos de pedidos de WooCommerce, probarlos te asegurará que todo se muestra correctamente y como pretendías en múltiples dispositivos. Un proceso de pruebas exhaustivo te ayuda a detectar errores de formato, enlaces rotos o elementos que faltan antes de que los vean tus clientes.

Aquí tienes algunas herramientas que pueden resultarte útiles:

• WP Mail Logging: WP Mail Logging es un popular plugin que rastrea todos los correos electrónicos salientes de tu sitio de WordPress. Utilízalo para verificar que tus correos personalizados se envían correctamente y revisar su contenido.
• Preview Emails for WooCommerce: Este plugin te permite previsualizar los correos electrónicos de WooCommerce directamente en tu panel de control de WordPress. Es una forma rápida de comprobar tus personalizaciones sin realizar pedidos reales.
• Herramientas de prueba de clientes de correo electrónico: Plataformas como Litmus o Email on Acid te permiten previsualizar correos electrónicos en diferentes clientes (como Gmail y Outlook) y dispositivos.

También puedes previsualizar tus correos electrónicos en tu panel de control. Utiliza el plugin Preview E-mails for WooCommerce para comprobar el diseño, los colores y el contenido de tus plantillas personalizadas. Asegúrate de que todos los elementos, como logotipos, texto y contenido dinámico, aparecen según lo previsto.

A continuación, envíate correos electrónicos de prueba a ti mismo o a una cuenta de prueba para ver cómo se ven en una bandeja de entrada real. Comprueba si hay problemas como enlaces rotos, imágenes que faltan o errores de formato.

Buenas prácticas a seguir para una personalización eficaz de los correos electrónicos de WooCommerce

Personalizar los correos electrónicos de los pedidos de WooCommerce eleva la experiencia de tus clientes. O al menos puede hacerlo. Seguir las mejores prácticas te ayuda a acercarte a ese objetivo creando diseños de correo electrónico que sigan siendo eficaces, accesibles y compatibles en todas las plataformas.

Aquí tienes cuatro pasos para asegurarte de que cualquier personalización del correo electrónico que hagas respeta las mejores prácticas vigentes:

1. Mantén los diseños adaptados a los móviles y fáciles de leer

Más de la mitad de los correos electrónicos se abren en dispositivos móviles, por lo que el diseño responsivo no es negociable. Utiliza CSS inline para controlar los diseños y asegurarte de que tus fuentes, botones e imágenes se escalan adecuadamente. Evita el desorden ciñéndote a diseños sencillos y limpios que den prioridad a la legibilidad.

2. Comprueba la compatibilidad con los clientes de correo electrónico

Los distintos clientes de correo electrónico, como Gmail y Outlook, procesan los correos HTML de forma diferente. Prueba tus correos electrónicos en varias plataformas y dispositivos para detectar incoherencias en el formato, los colores o la capacidad de respuesta.

3. Incluye una llamada a la acción clara

Cada correo electrónico de pedido debe tener un propósito más allá de confirmar la compra. Utiliza CTAs para fomentar acciones como dejar una reseña, buscar productos relacionados o suscribirte a tu newsletter. Haz que tus CTAs destaquen y sean fáciles de clicar, incluso en el móvil.

4. Utiliza un lenguaje sencillo y evita el formato excesivo

Escribe tus correos electrónicos en un tono conversacional que sea fácil de entender. Sobrecargar los correos electrónicos con imágenes, fuentes en negrita o diseños complejos puede distraer de tu mensaje y ralentizar los tiempos de carga.

Errores comunes y consejos para solucionarlos

Incluso con una planificación cuidadosa, las personalizaciones de los correos electrónicos de pedidos de WooCommerce a veces pueden salir mal. Ya se trate de correos electrónicos que no se envían, diseños que se dañan o contenido dinámico que no se actualiza, saber cómo solucionar los problemas más comunes te ahorrará tiempo y frustración.

Aquí tienes los tres principales problemas y cómo solucionarlos:

1. Los correos electrónicos no se envían tras la personalización

Si tus correos electrónicos dejan de enviarse después de hacer cambios, es probable que el problema esté relacionado con tu servidor de correo electrónico o con la configuración. Puedes solucionarlo:

• Comprobando la configuración de tu servidor de correo electrónico: Asegúrate de que tu entorno de alojamiento admite correos electrónicos transaccionales. Los proveedores de alojamiento administrado como Kinsta ofrecen un envío de correo electrónico optimizado para WooCommerce.
• Verificando la configuración SMTP: Utiliza un plugin como WP Mail SMTP para configurar un servidor SMTP fiable para el envío de correos electrónicos. Prueba la conexión para confirmar que los correos electrónicos se envían correctamente.

2. Conflictos de temas o diseños rotos

A veces, las personalizaciones pueden hacer que tu tema de WordPress entre en conflicto con el diseño del correo electrónico y rompa las cosas. Para resolverlo:

• Borra el caché de plantillas de WooCommerce: Ve a WooCommerce > Estado > Herramientas y haz clic en Borrar caché de plantillas. Esto obliga a WooCommerce a cargar tus plantillas actualizadas.

• Depurar problemas de código: Revisa tu código personalizado en busca de errores. Utiliza herramientas de depuración PHP o consulta la consola de desarrollador de tu navegador para identificar problemas.
• Comprueba las modificaciones del tema: Si tu tema anula las plantillas de correo electrónico de WooCommerce, asegúrate de que esas plantillas están actualizadas y son compatibles con tu versión de WooCommerce.

3. El contenido no se actualiza en los correos electrónicos

Si tus cambios en el contenido del correo electrónico no se muestran, el problema podría estar relacionado con plantillas anuladas o con la colocación incorrecta del código. Para depurar esto:

• Comprueba las plantillas de correo electrónico anuladas en tu tema: Ve a la carpeta woocommerce/emails de tu tema y comprueba que las plantillas coinciden con tus cambios. Si es necesario, copia plantillas nuevas del directorio del plugin WooCommerce y vuelve a aplicar tus personalizaciones.
• Asegúrate de que los fragmentos están en el archivo correcto: Añade fragmentos de PHP al archivo functions.php de tu tema hijo o a un plugin personalizado, para garantizar la compatibilidad durante las actualizaciones del tema.

Resumen

Personalizar los correos electrónicos de pedido de WooCommerce es una de las formas más sencillas de reforzar tu marca y mejorar la experiencia del cliente. Personalizar estos correos electrónicos para que reflejen tu estilo es otra forma de generar confianza y fomentar la repetición de la compra a lo largo del tiempo.

En este artículo se han explorado varios métodos para personalizar los correos electrónicos de tus pedidos de WooCommerce. Tanto si eliges soluciones basadas en plugins por su facilidad de uso como si te sumerges en el código personalizado para tener un control total, ambos enfoques pueden ayudarte a conseguir resultados asombrosos.

No dejes que las plantillas predeterminadas limiten tu potencial. Dedica tiempo a optimizar tus correos electrónicos y observa cómo repercute en la satisfacción y retención de clientes. Y si la gestión de tu sitio de WordPress te parece una tarea pesada, considera el alojamiento administrado de WordPress con Kinsta. Kinsta se encarga del mantenimiento y la optimización del rendimiento para que puedas centrarte en hacer crecer tu negocio y perfeccionar tus personalizaciones.

Steve Bonisteel Kinsta

Steve Bonisteel es un Editor Técnico de Kinsta que comenzó su carrera de redactor como periodista de prensa escrita, persiguiendo ambulancias y camiones de bomberos. Lleva tratando temas relacionados con la tecnología de Internet desde finales de la década de 1990.