WooCommerce: cómo personalizar plantillas de correo electrónico sin codificación

A diario, probablemente use arrastrar y soltar en una variedad de interfaces. Por ejemplo, arrastre y suelte sus elementos de Gmail en su categoría, cargue archivos en la biblioteca de medios de WordPress u organice las aplicaciones de la pantalla de inicio de su teléfono.

Si bien muchas plataformas de creación de páginas vienen para ayudarlo a diseñar su sitio web con arrastrar y soltar, la creación de correos electrónicos transaccionales de WooCommerce todavía se considera una tarea compleja.

De forma predeterminada, la configuración de correo electrónico de WooCommerce solo le permite cambiar los perfiles de color y el texto básicos. Para personalizar aún más, deberá modificar el código del tema.

Si no eres un experto en tecnología y no quieres descifrar el código entre los scripts en wp-content/plugins/woocommerce/templates/emails/email-styles.php más o menos, usa un marco de creación de correo electrónico de arrastrar y soltar es la mejor solución.

Introducción a YayMail

YayMail es una plataforma de creación de correo electrónico implementada para WooCommerce.

Se ha desarrollado con la facilidad de uso como objetivo principal, pero se ha probado para obtener la máxima compatibilidad con el navegador web y el cliente de correo electrónico mientras se vigila la capacidad de respuesta.

Puede descargarlo y usarlo de forma gratuita desde WordPress.org. Este código fuente abierto es gratis para siempre y no tendrás que actualizar a ninguna versión premium para personalizar completamente todas las plantillas de correo electrónico predeterminadas de Woo.

Ahora que lo instaló y activó, diríjase a WooCommerce > Personalizador de correo electrónico para acceder al editor de correo electrónico.

Diseñe correos electrónicos utilizando el generador de correo electrónico de arrastrar y soltar

Como un editor de arrastrar y soltar similar al creador de páginas de Elementor, YayMail viene con todas las opciones y configuraciones en la misma pantalla.

1. Barra de herramientas superior

Aquí encontrará el primer menú desplegable para todas las plantillas de correo electrónico de WooCommerce disponibles. Dependiendo de los complementos activos de WooCommerce en su sitio actual, verá nuevas plantillas aquí.

Si usa un complemento de membresía de WooCommerce, tendrá plantillas de correo electrónico adicionales, como Membresía: bienvenida, Recordatorio de membresía, Membresía caducada, etc.

El segundo menú desplegable, "Pedido de muestra", le permite elegir cualquier pedido real para ver cómo se muestran los campos dinámicos del correo electrónico en el extremo de un comprador específico.

En esta barra de herramientas superior, también puede encontrar los botones de acción más utilizados, incluidos:

• Códigos cortos: copie un código corto desde aquí y luego péguelo en el bloque apropiado del diseño del correo electrónico.
• Enviar correo electrónico de prueba : haga un clic para enviar un mensaje de prueba a cualquier dirección de correo electrónico para ver cómo se vería su correo electrónico diseñado en la bandeja de entrada.
• En blanco : borre todos los bloques de correo electrónico para que pueda tener un lienzo completamente en blanco y luego puede comenzar a diseñar para sus propios fines.
• Copiar plantilla : copia de una plantilla diseñada previamente y pégala en el cuerpo del correo electrónico actual. Luego puede hacer algunos pequeños ajustes, para evitar comenzar desde cero.
• Restablecer plantilla : esta opción restablece su plantilla al estado inicial, lo que significa que todavía tiene los bloques de correo electrónico predeterminados.
• Vista previa : vea instantáneamente su correo electrónico personalizado en las vistas de escritorio y móvil.
• Guardar : guarde sus ediciones en cualquier momento.

2. Panel lateral plegable

El panel lateral del personalizador de correo electrónico YayMail WooCommerce consta de dos pestañas: Elementos y Configuración .

Todos los elementos se pueden arrastrar e incluyen toneladas de opciones de personalización. El bloque de encabezado, por ejemplo, le permite editar su relleno, color de fondo, color de texto, familia de fuentes y otras opciones visuales.

Mientras que los cambios en la pestaña Elementos se aplican solo al bloque elegido, los ajustes en Configuración surten efecto para toda la plantilla de correo electrónico.

Algunas características de uso frecuente incluyen:

• Ancho del contenedor de correo electrónico
• Color de fondo periférico
• Ocultar/Mostrar imagen de producto y SKU
• Exportar/Importar plantillas de correo electrónico

3. Vista previa de correo electrónico

Dado que es un generador de correo electrónico basado en bloques, puede mover cualquier bloque hacia arriba o hacia abajo o usar el controlador para arrastrarlo y soltarlo.

En la esquina derecha, tendrás algunas opciones como:

• Duplicar el bloque de correo electrónico
• Copie el bloque a otra plantilla
• Eliminar bloque

Con YayMail, hay infinitas personalizaciones que puede realizar cambiando los diseños y diseños de correo electrónico, lo que no sucede si modifica los archivos de código de tema o usa el personalizador de WordPress.

Estudio de caso: personalizar el correo electrónico de confirmación de pedido de WooCommerce

Para comenzar a personalizar el correo electrónico de confirmación del pedido, vaya a WooCommerce > Personalizador de correo electrónico > Correo electrónico para mostrar. Desde allí, puede elegir Orden en proceso o Orden completada .

A partir de ese momento, puede comenzar a agregar los elementos que desee. Algunos elementos que voy a usar incluyen:

• Logotipo : cargue una imagen de logotipo transparente y cambie su tamaño para que se alinee con el ancho del contenedor de correo electrónico
• Iconos sociales : elija fácilmente los iconos de redes sociales y agregue la URL para cada plataforma
• Encabezado : edite el texto del encabezado, la fuente del encabezado, el color del texto y el color de fondo
• Imagen : agregue una imagen personalizada y ajuste su ancho usando la barra deslizante
• Pie de página: agregue los enlaces de su sitio web, como Mi cuenta, Atención al cliente, etc.

En cualquier momento, puede hacer clic en el botón Vista previa para ver la apariencia del correo electrónico en el escritorio/móvil en una ventana emergente sin tener que salir o actualizar la página actual.

Luego, puede cerrar fácilmente la vista previa para volver al editor.

Para ver YayMail en acción, consulte este video tutorial para ver cómo lo ayuda a hacer el trabajo.

integraciones

El correo electrónico transaccional es un buen medio de comunicación para su propósito de marketing. Especialmente cuando ofrece un modelo de suscripción o membresía a través de WooCommerce, debe personalizar las notificaciones por correo electrónico para que su perfil de marca sea personalizado y consistente.

Estudio de caso 1: Complemento de membresía de WooCommerce

De forma predeterminada, esto es lo que recibe su audiencia cuando su membresía en su sitio está por vencer. Puede editar el texto del asunto, el encabezado y el mensaje personalizado.

¿Por qué no convertir esta plantilla de correo electrónico en un llamado a la acción para asegurarse de que la audiencia regrese a su paquete de membresía?

Para este contenido adicional, usaré varias columnas para el mensaje de correo electrónico de Membresía que expira.

Los pasos son los siguientes:

• Arrastra y suelta un bloque de 2 columnas en el correo electrónico
• Edite el ancho de columna en porcentaje, es decir, 70/30
• Agregue color o imagen de fondo (opcional), aquí uso blanco como color de fondo
• Elija un bloque de texto para la primera columna
• Elija una tira de imagen para la segunda columna

Así es como logro una plantilla de correo electrónico de varias columnas para los mensajes de correo electrónico de membresía.

Estudio de caso 2: Complemento de correos electrónicos de seguimiento de WooCommerce

Con una extensión de plantilla de correo electrónico personalizada como Seguimientos, puede enviar contenido adicional después de que se hayan realizado acciones específicas del cliente.

Hay tantos escenarios de tiendas en los que se pueden enviar correos electrónicos automáticos programados con contenido personalizado.

En esta sección, demuestro cómo crear y personalizar la plantilla de correo electrónico que se enviará después de usar un cupón .

En primer lugar, comience a agregar un nuevo seguimiento:

• Dale un nombre, un asunto de correo electrónico y algo de contenido.
• En el metabox Tipo de seguimiento, asegúrese de elegir Correo electrónico de compra
• En los cuadros inferiores, elija desencadenar como "después de usar el cupón"
• Viene con muchas opciones avanzadas, así que siéntete libre de explorarlo.

Luego, pasemos a los pasos de personalización:

• Insertar logo y encabezado
• Agregar un elemento de cuadro de imagen
• Insertar contenido e íconos sociales

Dado que estoy tratando de establecer el tono para los perfiles de color de mi marca, se usará un color rosado para el color de fondo del encabezado y también para la imagen principal en el elemento del cuadro de imagen.

Diseñar los bloques es fácil, por lo que todo lo que queda por hacer es ajustar el relleno entre los bloques de correo electrónico para lograr la apariencia que siempre ha deseado.

Nota rápida: consulte sus documentos para asegurarse de obtener el complemento de YayMail correcto para sus extensiones de WooCommerce activas actuales.

Estudio de caso 3: complementos de recompensas de fidelidad

Una extensión de puntos y recompensas para WooCommerce puede generar más de 10 notificaciones por correo electrónico para ponerse en contacto con los clientes.

Las plantillas de correo electrónico varían según el complemento que use, pero básicamente parece un mensaje de texto. Desde la configuración de Notificación de puntos, puede escribir sus propios mensajes en el cuadro Descripción del correo electrónico utilizando su código abreviado.

Luego, guarde los cambios y diríjase a nuestro personalizador de correo electrónico de WooCommerce. En el menú desplegable, elija Correo electrónico de puntos y recompensas para comenzar a personalizar la plantilla.

Vamos a animarnos agregando más elementos multimedia, como imágenes, botones y enlaces.

Este nuevo diseño tendrá efecto en todas las notificaciones de Puntos a enviar. Solo que el bloque de notificación del medio se reemplazará con los mensajes que acaba de escribir en el paso anterior.

Conclusión

Existen varios métodos para la personalización de plantillas de correo electrónico de WooCommerce sin codificación. Si la modificación del código fuente no es su elección, puede intentar personalizar los correos electrónicos con la ayuda de complementos.

Algunos complementos utilizan el personalizador de WordPress para diseñar plantillas de correo electrónico. Sin embargo, un generador de correo electrónico de arrastrar y soltar lo ayudará a crear un diseño mucho más flexible con opciones avanzadas.

Hoy puede probarlo descargando YayMail desde el repositorio de WP y usarlo sin riesgos, ya que funciona a la perfección con todos los temas de WordPress.