Hola, esta sección comparte un artículo sobre el Personalizador de plantillas de correo electrónico de WooCommerce, un complemento de diseño para páginas de correo electrónico.

Hemos preparado este complemento, que puede definir directamente el estilo de nuestro correo electrónico WooCommerce. Ofrecemos varias versiones. Podemos usar la versión más alta.

Estilo de correo electrónico predeterminado:

Entonces, ¿cuándo se enviarán normalmente nuestros correos electrónicos de WooCommerce? Ingresamos a nuestro backend, buscamos WooCommerce y luego buscamos la configuración. Hay un correo electrónico en la configuración.

1 Personalizador de plantillas de correo electrónico de WooCommerce e1713881181503

Hacemos clic para abrir. Si instala el complemento WooCommerce, nos ayudará a proporcionar correos electrónicos como este. Por ejemplo, si su tienda recibe nuevos pedidos, enviará un correo electrónico a la dirección de correo electrónico de su administrador. Los clientes también pueden recibir correos electrónicos para pedidos creados por ellos mismos, pero los estilos de los correos electrónicos son relativamente feos, por lo que hacemos clic en Administrar para echar un vistazo. El contenido aquí es muy simple. Eso sí, primero deberás rellenar tu correo electrónico de Envío, y luego veremos unos códigos en él. Por supuesto, también puedes editar estos códigos y también puedes verlos.

2 Interfaz original de correo electrónico de WooCommerce e1713881226877

Vemos que lo que recibimos en tu email es este tipo de email, con pocos textos, por lo que el efecto no es especialmente bonito.

3 Estilo de correo electrónico predeterminado de WooCommerce

Entonces, a veces, necesitamos configurar el estilo de este correo electrónico por separado en nuestro correo electrónico. Por ejemplo, agregamos nuestro logotipo y luego resaltamos los atributos de nuestra marca o agregamos algunas recomendaciones para otros productos, incluidos cupones. Espera, todos necesitamos crear una plantilla de correo electrónico de este tipo. Por supuesto, también puedes modificar el código y su estilo para esta plantilla de correo electrónico. Pero si no comprende el código, debemos usarlo ahora. Le proporcionamos un complemento de plantilla personalizado.

Instalación del complemento:

Ahora, vayamos directamente a la instalación, busquemos nuestros complementos, hagamos clic en Agregar nuevo, seleccionemos el complemento que preparamos, instalemos la versión más alta y hagamos clic en Abrir. Una vez que la instalación sea exitosa, activaremos el complemento. Después de la activación, tendrá una descripción. Podemos descartarlo sin preocuparnos por ello.

4 Recordatorio de cierre del personalizador de plantillas de correo electrónico de WooCommerce e1713881301521

Lista de correo de WooCommerce:

Luego, habrá Plantillas de Correo electrónico adicionales en el botón de función de nuestro WordPress. Cuando hagamos clic para abrirlo, regenerará algunas plantillas de correo electrónico aquí. Entonces, por supuesto, las plantillas de correo electrónico aquí se basan en nuestro WooCommerce, como acabamos de ver. El contenido del correo electrónico en el CORREO ELECTRÓNICO nos ayuda a crear algunos efectos predeterminados. Podemos definir cada plantilla por separado, como por ejemplo un nuevo pedido. Cuando lo editemos más tarde, podemos arrastrarlo y soltarlo. Los módulos de la plantilla de correo electrónico son los mismos que los del complemento que utilizamos elementor. Juega ese papel.

5 Plantilla de correo electrónico predeterminada del personalizador de plantillas de correo electrónico de WooCommerce e1713881371888

Por supuesto, también podemos agregar nuevos correos electrónicos, agregarles módulos de encabezado e inferior y usar estos módulos para llamarlos en nuestros correos electrónicos.

El siguiente es un informe, que es un informe de datos que enviamos y recibimos por correo electrónico. La siguiente es una configuración y una extensión. Aquí, hacemos clic en configuración. La configuración es muy sencilla. Sólo requiere que completes un código de activación. Por supuesto, aquí se utiliza la versión GPL, por lo que no es necesario que completemos su clave aquí.

El siguiente es un funcionario que ha desarrollado complementos para la extensión. También ha desarrollado algunos otros complementos para nuestra tienda. También usaremos estos complementos más adelante. Te los explicaremos cuando los usemos más adelante.

La interfaz de edición de correo electrónico de WooCommerce:

Primero permítanos explicarle sus funciones principales.

En primer lugar, introducimos todos los correos electrónicos. Por ejemplo, ahora vemos un nuevo orden. ¿A quién se envía? Se envía a la dirección de correo electrónico de nuestro administrador, por lo que hacemos clic en editar. Por supuesto, también se puede copiar y luego hacemos clic en Editar para poder ingresar directamente a la interfaz de diseño de nuestra plantilla de correo electrónico.

6 Interfaz del editor de estilos de correo electrónico del personalizador de plantillas de correo electrónico de WooCommerce

Su diseño es el mismo que el de elementor. A la izquierda está su función. Puede agregar módulos, como agregar su diseño, agregar texto dentro, texto o agregar un botón, etc. Todo esto se usa. Es muy simple, entonces el medio es su panel de operación, y el lado derecho tiene algunas de sus funciones, como dónde se aplica nuestro correo electrónico. Por ejemplo, vemos el primero porque estamos editando un nuevo pedido. Cuando un usuario realiza un pedido en nuestro sitio independiente, enviará un correo electrónico a nuestro administrador para informarnos que un usuario ha realizado un pedido. Por supuesto, también puedes aplicarlo en otras ubicaciones, como por ejemplo para algunos usuarios. Después de completar el pedido, cambiar la contraseña, restablecer la contraseña, crear un usuario o registrarnos como miembro en nuestro sitio independiente, podemos recibir algunos correos electrónicos.

Configuración de correo electrónico de WooCommerce:

Echemos un vistazo a su método de edición. Por ejemplo, en primer lugar, después de instalar este complemento, crea directamente algunas configuraciones para nuestro correo electrónico. Luego, podemos obtener una vista previa de la configuración interna. Al cabo de un rato, vemos aquí dos pruebas, una para nuestro PC y otra para nuestro teléfono móvil. Luego, continúa y completa nuestra dirección de correo electrónico.

7 Prueba de vista previa de correo electrónico del personalizador de plantillas de correo electrónico de WooCommerce

Por ejemplo, centrémonos en este correo electrónico ahora y luego lo enviaremos primero para ver qué estilo recibimos en nuestro buzón y hacer clic en enviar. Eso sí, al enviar este correo electrónico, vemos que ya ha tenido éxito. El envío también requiere que su sitio independiente admita el envío de correos electrónicos. Ya os hemos hablado de esto antes. Si no configura una dirección de correo electrónico de envío, utilizará PHPmail de WordPress de forma predeterminada para enviar, por lo que debemos instalarlo. Un servidor de correo, el complemento que utilizamos, se llama SMTP. Con este método de envío de correo electrónico, una vez que se abre el canal para enviar su correo electrónico y el correo electrónico se envía correctamente, ahora podemos ingresar a nuestro buzón, ver si hemos recibido el correo electrónico y luego actualizarlo.

8 Estilo de correo electrónico del personalizador de plantillas de correo electrónico de WooCommerce

Después de actualizar, podemos ver que hemos recibido el último correo electrónico y luego hacemos clic para abrir el correo electrónico. Ahora vemos el efecto generado por su plantilla predeterminada. Por supuesto, este orden no existe, es solo lo que configuramos, entonces este correo electrónico será más completo que los correos electrónicos de solo texto que vimos antes. También contiene imágenes, incluso podemos agregar algunos logotipos de marcas o nuestras cuentas de redes sociales para que los usuarios puedan aprender más sobre nosotros. La estación independiente es más confiable.

Modificación del título del correo electrónico de WooCommerce:

Editemos este correo electrónico, pero también puedes modificar el contenido anterior.

9 Código corto del encabezado de correo electrónico del personalizador de plantillas de correo electrónico de WooCommerce

Solo para modificar el contenido interno, debe saber que tiene algunas llamadas de etiquetas. Por ejemplo, el de arriba es el nombre del usuario; Tendrá una llamada y luego habrá un código corto llamado número de pedido, que es el ID de nuestro pedido. Se puede ver en nuestra emisora independiente. Abrimos nuestro backend nuevamente e ingresamos los pedidos para WooCommerce, así los pedidos en nuestra estación independiente tendrán un número de pedido, que es nuestro número de pedido para que pueda ver algunos usuarios específicos.

Información: puedes modificar el contenido aquí. Por supuesto, puedes modificar el texto aquí. Puede modificar los códigos cortos anteriores si no desea utilizarlos. Si desea utilizar otros códigos cortos, hay un botón detrás.

10 Código corto de encabezado de correo electrónico del personalizador de plantillas de correo electrónico de WooCommerce

Hacemos clic y vemos más códigos cortos aquí, como el correo electrónico del administrador, el nombre de nuestro sitio, la dirección del sitio, etc. Puedes probarlos todos. Los nombres aquí también son muy simples.

Editor de estilo de correo electrónico de WooCommerce:

Ahora, intentemos modificar el contenido anterior. También está dividido en diferentes diseños. Por ejemplo, si hacemos clic en el primero, nos llevará directamente a su página de bloques porque, como acabamos de decir, su página de bloques. El encabezado y la parte inferior se colocan por separado en los bloques en el fondo del complemento. Vemos que en el interior hay una cabeza y un fondo. También puedes editarlos aquí.

Una vez que haga clic en él, saltará a otra página, por lo que podemos reemplazar el logotipo con él aquí.

11 Modificación del logotipo del encabezado del personalizador de plantillas de correo electrónico de WooCommerce

Por ejemplo, si vemos un logotipo aquí, lo eliminamos. Después de eliminarlo, agregamos una imagen, la arrastramos indirectamente y luego cargamos nuestro logotipo. Tenemos un logo en el escritorio de la computadora. Luego, sube el logo directamente. Después de cargarlo, insértelo. Después de insertarlo, por supuesto, puedes modificar el estilo del logo. También puede agregar una dirección al logotipo. Agregaremos la dirección de nuestra estación independiente a esta dirección. También puede agregarle un atributo Alt. El atributo Alt no tiene ningún efecto SEO aquí. Es solo para agregar texto que los usuarios pueden ver si su logotipo no se puede mostrar.

12 Modificación del estilo del logotipo del encabezado del personalizador de plantillas de correo electrónico de WooCommerce

Aquí hay algunas modificaciones a su estilo. Por ejemplo, vemos que el logo ahora es un poco grande, así que podemos modificarlo para que sea más pequeño. Por ejemplo, si se modifica a 160, el logotipo se hará más pequeño. Además, la alineación del logotipo está alineada a la izquierda, a la derecha y centrada. También puede agregarle algunas oraciones internas o puede agregarle un color de fondo. Esta es su interfaz de edición.

Por supuesto, también podemos personalizar algo de CSS, pero rara vez lo usamos; sólo necesitamos entenderlo.

También puedes editar el segundo contenido de la misma manera. Después de editarlo, puedes obtener una vista previa. Este es el efecto que se muestra en nuestra PC y teléfonos móviles. Luego, el siguiente paso es enviar el correo electrónico. Una vez que se envíe correctamente, completaremos un correo electrónico de prueba aquí, lo devolveremos a nuestro buzón y lo actualizaremos.

Módulo de edición de correo electrónico de WooCommerce:

Después de actualizar, podemos ver que aparece el segundo correo electrónico. Este correo electrónico solo tiene el contenido que acabamos de crear. Por supuesto, nuestro logo no se muestra porque la carga de la imagen puede ser un poco lenta. Como has podido comprobar, las modificaciones en el resto de zonas son las mismas. Por ejemplo, si queremos agregar algún contenido en el medio o debajo, podemos buscar nuestro módulo a la izquierda y agregarlo.

13 Introducción al módulo de funciones de personalizador de plantillas de correo electrónico de WooCommerce

Los módulos aquí también son muy simples. Primero, su diseño puede dividir nuestra página de correo electrónico en una columna, dos columnas, tres columnas y cuatro columnas. Luego, podemos agregar algunos módulos a continuación, como agregar una parte de nuestro texto y luego agregar una imagen. El botón anterior, etc., se utilizan de la misma manera que nuestro complemento elementor, pero también puedes agregar cupones. Estas son algunas funciones básicas del editor de complementos.

Cuando desee personalizar el tamaño o el estilo de algunos módulos en nuestros correos electrónicos existentes, de manera similar, después de hacer clic en este lápiz, ingresará directamente a la interfaz de edición de este módulo. Por ejemplo, si vemos que lo has añadido a esta zona, puedes añadirle relleno o un color de fondo. También hay algo de ancho debajo, y también puede agregarle esquinas redondeadas a la izquierda y a la derecha. Estos son muy simples.

También puede agregar un fondo a toda la página de correo electrónico. Por ejemplo, puedes agregar una imagen o un color de fondo. Una vez que la modificación sea exitosa, simplemente haga clic en actualizar en la parte inferior para actualizarla.

14 Modificación del fondo del personalizador de plantillas de correo electrónico de WooCommerce

Luego, hay algunos botones de función a la derecha. Por ejemplo, podemos eliminar este correo electrónico o copiarlo. Por supuesto, también podemos añadir algunos correos electrónicos nuevos.

Echemos un vistazo al lado derecho. Como acabamos de decir, el primero es sobre el estado de este correo electrónico. Por ejemplo, si un usuario realiza un nuevo pedido, podemos enviarle un correo electrónico. Si cancela el pedido o el pago falla, por supuesto, también podemos crear un nuevo correo electrónico para él por separado y enviárselo a nuestro administrador para que podamos recuperar el pedido a tiempo. También puedes modificarlo para los clientes. Por ejemplo, para algunos pedidos completados, puede ingresar su número de guía de embarque en su correo electrónico y luego el usuario podrá saber a través del correo electrónico dónde se enviaron sus productos.

15 Configuraciones de estado de pedido del personalizador de plantillas de correo electrónico de WooCommerce

El siguiente es su diseño. Por defecto es de izquierda a derecha, pero por ejemplo, en algunas regiones de Medio Oriente, como Arabia, es de derecha a izquierda, por lo que también puedes configurarlo para nuestro correo electrónico. Lee de derecha a izquierda. Hay algunas reglas a continuación. Por ejemplo, el primero es prioridad. La llamada prioridad. Si configura varios correos electrónicos para nuevos pedidos, puede establecer la prioridad más alta.

Primero, envíe este correo electrónico y luego podrá dirigirse a algunos países. Por ejemplo, supongamos que es una estación independiente en varias regiones y países. En ese caso, los idiomas son diferentes en diferentes países, por lo que aquí puede dirigirse a diferentes países, configurar los mismos correos electrónicos de pedidos nuevos en diferentes idiomas y enviarlos a clientes en diferentes países. Todo esto es posible, incluida la configuración de diferentes correos electrónicos para diferentes categorías en nuestra estación independiente. Estas son algunas reglas.

Lo siguiente es para nuestra cuota de pedidos, que son las cuotas mínima y máxima. ¿Qué quieren decir? Es decir, has establecido ciertas reglas para este correo electrónico. Sólo si cumple esta regla enviará este correo electrónico. Pero en circunstancias normales, a excepción de este país e idioma, lo utilizaremos de forma predeterminada.

La siguiente es la prueba. Lo que acabamos de probar es el correo electrónico #15906, por lo que el correo electrónico que recibimos tiene nuestro título o puede ver el número de pedido en nuestro correo electrónico. Por supuesto, este es un correo electrónico de prueba, por lo que no se puede ver en el título del correo electrónico en nuestro título, pero se puede ver en el interior. Luego en la parte inferior vemos que hay algunas funciones, es decir, puedes importar y exportar la configuración de este correo electrónico o es una copia. Por ejemplo, si exportamos, tendrá algunas configuraciones. Luego, para su próximo correo electrónico, puede colocar estas configuraciones directamente en otro correo electrónico para editarlas y guardarlas. Entonces, su estilo de correo electrónico será coherente y propicio para la coherencia del estilo de nuestra marca.

16 Configuración del personalizador de plantillas de correo electrónico de WooCommerce Importar Exportar

Bien, así es como se utiliza un complemento de edición para correo electrónico.