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

Suponga que después de varios días de arduo trabajo, configura con éxito su tienda en una plataforma de alojamiento web WooCommerce especializada

La página del producto ahora está conectada a una base de datos que funciona perfectamente y el proceso de pago no tiene ningún problema. Cada elemento, incluidas las páginas de productos, la galería y los comentarios, reflejan los colores y el estilo de su marca.

Entonces decide probar su proceso de pedido de productos y de repente descubre que el correo electrónico de pedido es bastante soso o demasiado genérico desde el punto de vista de los usuarios. Ahora debe preguntarse qué fue en vano todo su arduo trabajo de personalizar su tienda WooCommerce.

WooCommerce incluye varios estados de pedidos que pueden no coincidir con los flujos de su tienda, pero aun así puede marcar pedidos con estados personalizados, como Pago pendiente, Procesando, En espera, Fallido, etc.

Muchos propietarios y administradores de tiendas de WooCommerce tienen esta consulta común: ¿Cómo puedo modificar los mensajes de solicitud predeterminados de WooCommerce para tener la apariencia de mi marca y cómo puedo agregar contenido adicional para ayudar a los clientes con su pedido y cómo crear un estado de pedido de WooCommerce personalizado? .

Si bien crear correos electrónicos HTML impresionantes es realmente un logro en sí mismo, WooCommerce ofrece varias opciones para que incluso los aficionados puedan crear correos electrónicos increíbles.

Correos electrónicos de los clientes

"Vanilla" ofrece notificaciones por correo electrónico de WooCommerce que se envían a los clientes en respuesta a sus interacciones con la tienda. Los siguientes son los correos electrónicos más importantes para los clientes de su tienda WooCommerce.

• Nuevo pedido: los correos electrónicos de nuevos pedidos se envían cuando se recibe un nuevo pedido.
• Pedido cancelado: los correos electrónicos de pedidos cancelados se envían cuando los pedidos se han marcado como cancelados.
• Pedido fallido: los correos electrónicos de pedidos fallidos se envían cuando un pedido en proceso o en espera se marca como fallido.
• Pedido en espera: esta es una notificación de pedido enviada a los clientes. Contiene detalles del pedido después de que un pedido se pone en espera.
• Orden de procesamiento: Esta es una notificación de orden enviada a los clientes. Contiene los detalles del pedido después del pago.
• Pedido completado: los correos electrónicos de pedidos completos se envían a los clientes cuando sus pedidos se marcan como completados. Estos correos electrónicos suelen indicar que los pedidos han sido enviados.
• Pedido reembolsado: los correos electrónicos de pedido reembolsado se envían a los clientes cuando sus pedidos están marcados como reembolsados.
• Factura del cliente: los correos electrónicos de facturas del cliente contienen información del pedido y enlaces de pago.
• Nota del cliente: los correos electrónicos de notas del cliente se envían cuando agrega una nota al pedido.
• Restablecer contraseña: los correos electrónicos de "restablecimiento de contraseña" del cliente se envían cuando los clientes restablecen sus contraseñas.
• Nueva cuenta: los correos electrónicos de "nueva cuenta" del cliente se envían al cliente cuando un cliente se registra mediante el pago o la página de registro de la cuenta.

Además de estos tipos de correo electrónico estándar, también puede agregar correos electrónicos personalizados.

Opciones globales de correo electrónico de WooCommerce

El correo electrónico estándar de WooCommerce se ve así:

El administrador de WooCommerce permite una personalización básica de este diseño de correo electrónico predeterminado. Se puede acceder a estas opciones después de iniciar sesión en el administrador de WordPress e ir a WooCommerce> Configuración> Correos electrónicos> Opciones de remitente de correo electrónico . Estas opciones incluyen:

• Establezca el nombre/dirección del remitente (visible para el cliente)
• Tamaño de la imagen del encabezado del correo electrónico de WooCommerce
• Cambiar el texto del pie de página del correo electrónico
• Elija diferentes colores de base, fondo y cuerpo de texto

Recuerde que estas opciones se aplican a todos los correos electrónicos. En cuestión de minutos, puede crear un correo electrónico altamente personalizado modificando el tamaño de la imagen del encabezado del correo electrónico de WooCommerce, el texto del pie de página personalizado y otro color base.

Es posible que haya notado que WooCommerce identificó que se utilizó un color base brillante. Para compensar, utilizó un tono adecuado para el título. Desafortunadamente, esta lógica no se aplicó al contenido del pie de página. ¡Este percance se puede solucionar fácilmente de forma manual!

Opciones específicas de correo electrónico de WooCommerce

Cada tipo de correo electrónico tiene su propio conjunto de opciones de personalización. Se puede acceder a estas opciones a través de WooCommerce > Configuración > Correos electrónicos > Orden de procesamiento (Esta ruta de ejemplo se enfoca en el procesamiento de correos electrónicos de pedidos. Puede modificar varios aspectos del correo electrónico, que incluyen:

• Habilite o deshabilite si el correo electrónico se envía en absoluto
• El asunto del correo electrónico
• Encabezado del correo electrónico (el valor predeterminado es "Gracias por su pedido")
• Si el correo electrónico se envía como HTML o texto sin formato (la opción predeterminada es HTML)

Aquí, configuré el encabezado de correo electrónico personalizado como ' Gracias por su pedido'.

Anular la plantilla personalizada de correo electrónico de WooCommerce

Un enfoque más efectivo y eficiente es modificar los diseños de correo electrónico predeterminados. WooCommerce ofrece un útil sistema de plantillas que le permite personalizar partes de su tienda o correos electrónicos replicando los archivos de formato en el tema. Cada tipo de correo electrónico tiene un archivo de plantilla para su contenido (por ejemplo, woocommerce/templates/emails/customer-process-order.php). Además, hay plantillas compartidas a las que todos los tipos de correo electrónico pueden acceder y usar. Estos se pueden encontrar en woocommerce/templates/emails/email-styles.php . En muchos casos, esta es la plantilla que los desarrolladores anulan para cambiar los aspectos compartidos de los correos electrónicos. El proceso para tratar el problema del pie de página mencionado anteriormente es:

1. Primero, asegúrese de que exista el siguiente directorio en la instalación de WordPress: wp-content/themes/ A continuación, copie el archivo que se encuentra en wp-content/plugins/woocommerce/templates/emails/email-styles.php en el tema de la tienda en: Finalmente, edite your-theme /woocommerce/emails/email-styles.php para cambiar el color del texto del pie de página a negro (para abreviar, solo se muestra la parte relevante del código del archivo de plantilla):

 $crédito = "
color: #66bae3;
tamaño de fuente: 15px;
alineación de texto: centro;
";

Esto genera un pie de página mucho más legible:

Personalización condicional con acciones/filtros

El enfoque final y más efectivo para personalizar los correos electrónicos es trabajar con el código personalizado de WooCommerce. Obviamente, esto requiere un alto nivel de experiencia en PHP. La buena noticia es que el proceso es sencillo porque los diseños originales de WooCommerce todavía están en uso. El proceso implica cambiar partes del contenido.

Funciones de filtro

• tiene_filtro()
• Añadir filtro()
• aplicar_filtros()
• aplicar_filtros_ref_array()
• filtro_actual()
• eliminar_filtro()
• eliminar_todos_los_filtros()
• haciendo_filtro()

Acciones Funciones

• tiene_acción()
• añadir_acción()
• hacer_acción()
• hacer_acción_ref_array()
• did_action()
• remove_action()
• eliminar_todas_las_acciones()
• haciendo_acción()

Funciones de activación/desactivación/desinstalación

• registrarse_activación_gancho()
• registrarse_desinstalar_gancho()
• registrarse_desactivación_gancho()

Para este ejemplo, agregaré algunas instrucciones de pago útiles al correo electrónico, según el tipo de pago de pago utilizado.

Para comenzar, agregue lo siguiente a functions.php del tema:

 add_action('woocommerce_before_email_order', 'add_order_instruction_email', 10, 2);
 
función add_order_instruction_email ($order, $sent_to_admin) {
  
  si (! $ enviado_a_admin) {
 
    if ( 'bacalao' == $pedido->método_pago) {
      // método contra reembolso
      echo '<p><strong>Instrucciones:</strong> El pago total debe realizarse inmediatamente después de la entrega: <em>solo efectivo, sin excepciones</em>.</p>';
    } más {
      // otros métodos (es decir, tarjeta de crédito)
      echo '<p><strong>Instrucciones:</strong> Busque "Madrigal Electromotive GmbH" en el próximo estado de cuenta de su tarjeta de crédito.</p>';
    }
  }
}

Si el cliente optó por "Pago contra reembolso" al realizar el pago, el cliente recibirá un correo electrónico con instrucciones útiles para realizar el pedido:

Opciones de complemento/pasarela de pago

Varios complementos y pasarelas de pago le permiten personalizar partes de los correos electrónicos de pedidos. Por ejemplo, el método de pago de transferencia bancaria/cable incorporado le permite configurar instrucciones e insertar información de transferencia bancaria. Esto se puede hacer fácilmente a través de WooCommerce > Configuración > Pago > BACS .

Aunque es poco común, es bueno saber que estas opciones están disponibles. Esta información también podría ayudarlo a optar por un complemento particular para la tienda.

Correos electrónicos de WooCommerce add_actions Gancho

Cuando se trabaja con correos electrónicos de WooCommerce, el enlace add_actions a menudo resulta útil. Cuando trabaje con este gancho, deberá usar una variable global, correo electrónico que contendrá el asunto del correo electrónico. aquí está el fragmento de código:

 add_action('woocommerce_email_header', 'woocommerce_emails_before_header', 1,3);
función woocommerce_emails_before_header( $email_heading, $email ){
    $GLOBALS['correo'] = $correo;
}

El enlace anterior se puede colocar en functions.php (ubicado en la carpeta de su tema) o al comienzo de la plantilla de correo electrónico de WooCommerce. la variable global $email llama al objeto de correo electrónico principal de WooCommerce, mientras que $order contiene una instancia del objeto de pedido global de WooCommerce

 $correo global; 
$pedido = $correo->objeto;

Correo electrónico personalizado de WooCommerce por producto

El siguiente código envía una plantilla de correo electrónico de pedido personalizado para un producto diferente

por ejemplo, para el ID de producto 87 , desea mostrar el título del encabezado Notificación por correo electrónico de WooCommerce O cómo probar los correos electrónicos de WooCommerce:

 función woocommerce_custom_email_per_product_depending_on_product_id ($email_heading, $order) {
    $woocommerce global;
    $artículos = $pedido->get_items();
    foreach ($ artículos como $ artículo) {
        $id_producto = $artículo['id_producto'];
        if ( $id_producto == 87 ) {
            $email_heading = 'Notificación por correo electrónico de WooCommerce O cómo probar los correos electrónicos de WooCommerce';
        }
        devolver $email_heading;
    }
}
add_filter('woocommerce_email_heading_customer_processing_order', 'woocommerce_custom_email_per_product_depending_on_product_id', 10, 5);

Nota: ahora que conoce todo el proceso de personalización de los correos electrónicos de pedidos de WooCommerce, ahora tiene la opción de conservar la función o crear un complemento de correo electrónico de WooCommerce separado para la confirmación y notificación por correo electrónico de Woocommerce.

Conclusión

Configurar una tienda WooCommerce es bastante fácil, pero personalizar las plantillas de correo electrónico predeterminadas a veces se vuelve complicado. En este tutorial, analicé cómo puede enviar correos electrónicos de la tienda alojada de WooCommerce totalmente personalizados para adaptarse a todos los aspectos de las actividades de la tienda. También destaqué la forma en que las plantillas de correo electrónico predeterminadas se pueden modificar para insertar información específica de la tienda y del pedido en los correos electrónicos para brindar una mejor experiencia al usuario.

¡Deje un comentario a continuación si desea agregar a la discusión o hacer una pregunta!