Personalizar los correos electrónicos en WooCommerce

Después de escribir qué tipo de emails automáticos son los mejores para una tienda online, me llegaron muchas consultas de cómo se personalizaban los textos o modificaban los colores desde WooCommerce.

Así que en este tutorial vamos a ver todas las configuraciones, desde las más básicas a tocar algo de código. ¿Empezamos?

Ajustes de mails en WooCommerce

Nos vamos a WooCommerce > Ajustes > Correos Electrónicos para configurar todos los ajustes básicos. En esta sección veréis casi todos los correos electrónicos que se mandan por defecto, tanto de WooCommerce como de sus plugin afines.

Modificar colores y encabezados

• Nombre del remitente: El nombre de la tienda online para que te identifiquen.
• Dirección del remitente: Recomiendo el correo corporativo para dar credibilidad.
• Imagen de cabecera: Se debe poner mediante url y si es el logo formato alargado mucho mejor.
• Texto del pie de página: Saldrá al final de todos los correos. Lo ideal es que pongáis la url de vuestra tienda para que os sepan localizar y el nombre de la empresa.

• Color base: Es el color de fondo de la cabecera, encabezados y enlaces, en la imagen de ejemplo sería el rojo.
• Color de fondo: Es el fondo que está fuera del contenido, en este caso sería el gris.
• Color de fondo del cuerpo: del que lleva texto.
• Color de texto del cuerpo.

Con esto ya podemos empezar a tener un email con nuestros colores de marca y empezar a transmitir confianza.

Tipos de avisos por email en WooCommerce

Los que están con un tic lila marcados son los que están activos, con una cruz grisácea los desactivados.

• Nuevo pedido: Lo recibimos nosotros como aviso para procesarlo lo más rápido posible.

• Pedido cancelado: Nos avisa de que el cliente ha cancelado el pedido que ya estaba activo.
• Pedido fallido: Al cliente le ha fallado la tarjeta, nos viene bien recibirlo para contactar con el lo antes posible.
• Pedido a la espera: Lo recibe el cliente avisándole de que su pedido aún no se ha tramitado. Suele ser cuando es por transferencia bancaria o la pasarela de pago no lo ha aceptado. Si quieres saber todos los métodos de pago que hay en una tienda online haz clic aquí.
• Procesando tu pedido: Se avisa al cliente de que ya se ha aceptado el pago y que estamos empaquetándolo.
• Pedido completado: Para que el usuario sepa que ya se ha completado su pedido y que lo recibirá en el tiempo acordado.
• Pedido reembolsado: Se avisa al cliente que su devolución se ha realizado con éxito.

Estas son todas las básicas, si estáis buscando el mail de los códigos de seguimiento en los pedidos va en un plugin aparte, lo explico en este artículo.

Configurando los avisos por correo electrónico

En esta parte configuraremos quien recibe los emails, si el cliente o nosotros, de ser esto último, configuraremos los correos de destinatario desde gestionar:

Los tres primeros son los que recibimos: Nuevo pedido, pedido cancelado y pedido fallido. Desde gestionar podemos cambiarlos e incluso añadir más separándolos por comas:

• Destinatarios: Podemos poner todos los mails separados por comas que queramos.
• Asunto: Personalizaremos como queremos que se nos muestre, al pasar por la interrogación tenéis todos los tips de personalización.
• Encabezado del correo: Ídem a lo anterior.
• Contenido adicional: Es bueno poner alguna indicación estándar para el almacén o el resto del equipo.
• Tipo de correo electrónico: Por html siempre para que le salga visualmente bien a todos los clientes.

Con esto ya estarían todas las configuraciones básicas hechas, si quieres añadir contenido a estos mails mediante código te dejo este tutorial. Donde podrás ver cómo añadir productos relacionados, textos en determinadas zonas, etc

Plugin para modificar correos en WooCommerce

Soy partidario de usar este tipo de plugin si son muchos los cambios que se van a realizar, sino lo mejor es ir al otro tutorial que he mencionado. Si lo queréis gratuito os recomiendo usar Visual Email Designer for WooCommerce que lo tenéis en el repositorio oficial de WordPress.

Sin embargo si lo queréis hacer fácil, tipo arrastrar y soltar sin usar nada de código os recomiendo Email Customizer for WooCommerce with Drag and Drop Email Builder que aunque cueste unos 50$ si no sabes código te ahorrará mucho tiempo y te salvará para que no rompas nada de la web.

Reeviar los correos de Fallido y Cancelado al cliente

Per defecto en WooCommerce, estos dos mails se mandan al admin de la tienda y no al cliente, no sé el motivo pero es así. Si quieres que estos correos vayan al cliente añade este código a tu functions.php o a tu plugin de code snippets:

add_action('woocommerce_order_status_changed', 'dl_cambio_fallido_cancelado_email', 10, 4 );
function dl_cambio_fallido_cancelado_email( $order_id, $old_status, $new_status, $order ){
    if ( $new_status == 'cancelled' || $new_status == 'failed' ){
        $wc_emails = WC()->mailer()->get_emails(); // Get all WC_emails objects instances
        $customer_email = $order->get_billing_email(); // Email del cliente
    }

    if ( $new_status == 'cancelled' ) {
        // change the recipient of this instance
        $wc_emails['WC_Email_Cancelled_Order']->recipient = $customer_email;
        // Sending the email from this instance
        $wc_emails['WC_Email_Cancelled_Order']->trigger( $order_id );
    } 
    elseif ( $new_status == 'failed' ) {
        // change the recipient of this instance
        $wc_emails['WC_Email_Failed_Order']->recipient = $customer_email;
        // Sending the email from this instance
        $wc_emails['WC_Email_Failed_Order']->trigger( $order_id );
    } 
}

Recuerda modificar los textos que van, ya que es como si hablasen al admin de la tienda. Puedes ponerles que te contacten si han tenido algún problema o que pueden completar su compra con la url del pago.

Espero que os haya sido de utilidad, como siempre en comentarios os puedo resolver todas las dudas. Esta es la configuración que suelo usar en todas las tiendas en línea que realizo con WooCommerce.