Cómo crear plantillas personalizadas de los correos electrónicos de WooCommerce

Para personalizar las plantillas de los correos electrónicos de WooCommerce, el primer paso es crear las plantillas que quieras personalizar.

Para ello debes copiar la plantilla que quieras personalizar en una ruta específica dentro de las carpetas de tu tema activo.

El criterio es el siguiente:

Ruta de la plantilla original: https://midominio.com/w-content/plugins/woocommerce/templates/emails/nombre-de-la-plantilla.php
Ruta de la copia de la plantilla original: https://midominio.com/wp-content/themes/carpeta-de-tema-activo/woocommerce/emails/nombre-de-la-plantilla.php

Puedes copiar el archivo de la plantilla manualmente, desde el gestor de archivos del hosting o por FTP, o hacerlo automáticamente desde WooCommerce así:

Ve al escritorio de WordPress → WooCommerce → Ajustes → Correos electrónicos.
Haz clic en el botón «Gestionar» de la plantilla de correo electrónico que quieras personalizar/copiar.
En la siguiente pantalla, abajo del todo, tendrás una sección con las rutas de origen y destino de la plantilla, y un botón para «Copiar archivo al tema» a la ruta correcta de tu tema activo.
Una vez copiado el archivo al tema se mostrará un texto informando de ello y el botón anterior cambiará para borrarlo en caso de querer revertir las personalizaciones.

copiar archivos plantilla email woocommerce al tema

archivo de plantilla woocommerce copiado al tema

Cómo añadir personalizaciones editando plantillas de correo electrónico de WooCommerce

Una vez copiado el archivo de la plantilla elegida al tema ya no hay atajos ni ayudas desde el escritorio. A partir de este momento los cambios que hagas debes realizarlos mediante código, directamente en el archivo PHP de la plantilla que hayas copiado a la carpeta del tema.

Llegados a este punto las posibilidades de personalización son infinitas, y el límite son tus conocimientos de programación, preferiblemente HTML, PHP, además de los ganchos y variables de WooCommerce, imprescindibles para personalizaciones profundas en las plantillas, que sean útiles para tus clientes o para tu gestión de la tienda online.

Vamos a ver un ejemplo de las posibilidades…

Digamos que has copiado la plantilla del recibo del pedido (customer-invoice.php) y quieres darle un «toque personal», dedicando un mensaje al cliente antes del resumen de su pedido, pues nada más fácil.

add_action( 'woocommerce_email_before_order_table', 'ayudawp_texto_email_antes_tabla_pedido', 10, 4 );
function ayudawp_texto_email_antes_tabla_pedido( $order, $sent_to_admin, $plain_text, $email ) {
echo "Gracias por comprar en nuestra tienda, esperamos verte pronto de nuevo. Si tienes cualquier duda sobre tu pedido envíanos un correo a [email protected]";
}

El resultado es como ves en la siguiente captura…

Cómo personalizar otras plantillas de correo electrónico de WooCommerce

Además de las plantillas de correo electrónico que puedes copiar fácilmente desde los ajustes de WooCommerce, hay otras adicionales que vas a echar en falta, bien porque son correos muy específicos, bien porque son parte de otros correos, que se modifican por separado y se aplican a otros emails.

Son las siguientes:

customer-new-account.php o customer-new-account-blocks.php – Email enviado al cliente cuando registra su cuenta de usuario.
customer-reset-password.php – Email con instrucciones para establecer o restaurar la contraseña de usuario.
email-customer-details.php – Email con los detalles del nuevo usuario.
email-downloads.php – Parte de los correos electrónicos referida a las descargas, gestionado separadamente en este archivo PHP.
email-footer.php – Pie de página de todos los correos electrónicos de WooCommerce.
email-header.php – Cabecera de todos los correos electrónicos de WooCommerce.
email-order-details.php – Tabla con el detalle del pedido para todos los correos electrónicos de WooCommerce.
email-order-items.php – Artículos del pedido, para todos los correos electrónicos de WooCommerce.
email-styles.php – Hoja de estilos global que se aplica a todos los correos electrónicos.

El último archivo es uno de los más modificados habitualmente, para cambios de diseño, así como los archivos para la cabecera y pie de página de los correos.

Por ejemplo, si quieres cambiar algún color de texto, fondos, añadir estilos o lo que haga falta, mediante CSS, el archivo email-styles.php es el archivo en el que incluir tus personalizaciones.

Estos archivos, al no estar asociados a correos electrónicos «tipo» de WooCommerce, sino que son parte de ellos o especiales, no tenemos un botón para copiarlos al tema, pero puedes hacerlo manualmente, siguiendo la estructura de rutas que comentamos al principio de esta guía.

Cómo personalizar correos electrónicos de WooCommerce sin modificar ni copiar las plantillas

Hay, además de lo visto hasta ahora, otro modo de personalizar los correos electrónicos de WooCommerce, y es mediante los famosos ganchos, en este caso de WooCommerce.

De lo que se trata es de invocar a funciones y variables de WooCommerce, desde un plugin a medida o archivo functions.php del tema activo, mediante ganchos, que añadan contenido a las plantillas, sin modificarlas directamente, sino mediante llamadas desde ganchos.

Ten en cuenta que con el uso de ganchos añadimos contenidos adicionales a las plantillas, no las modificamos.

Los ganchos más utilizados son los siguientes:

woocommerce_email_header ($email_heading, $email) – gancho para añadir contenido debajo de la cabecera
woocommerce_email_order_details ($order, $sent_to_admin, $plain_text, $email) – gancho para añadir contenido bajo el texto «Has recibido un pedido de…»
woocommerce_email_before_order_table ($order, $sent_to_admin, $plain_text, $email) – gancho para añadir contenido encima de la tabla del pedido
woocommerce_order_item_meta_start ($item_id, $item, $order, $plain_text) – gancho para añadir contenido debajo de cada artículo del pedido
woocommerce_order_item_meta_end ($item_id, $item, $order, $plain_text) – gancho para añadir contenido debajo del último elemento meta del pedido
woocommerce_email_after_order_table ($order, $sent_to_admin, $plain_text, $email) – gancho para añadir contenido debajo de la tabla del pedido
woocommerce_email_order_meta ($order, $sent_to_admin, $plain_text, $email) – gancho para añadir contenido debajo del gancho anterior
woocommerce_email_customer_details ($order, $sent_to_admin, $plain_text, $email) – gancho para añadir contenido antes de los datos del cliente
woocommerce_email_footer ($email) – gancho para añadir contenido antes del pie de página

Un ejemplo de uso de los ganchos anteriores sería este, usando el gancho 7, muy práctico:

add_action( 'woocommerce_email_order_meta', 'ts_email', 10, 4 );
function ts_email( $order, $sent_to_admin, $plain_text, $email ) {
$items = $order->get_items();

foreach ($items as $key => $item) {
$product_name = $item['name'];
$product_id = $item['product_id'];
$terms = get_the_terms( $product_id, 'product_cat' );

$args = array(
'post_type' => 'product',
'posts_per_page' => 10,
'product_cat' => $terms[0]->slug
);

$loop = new WP_Query( $args );
echo 'Aquí tienes otros productos que podrían interesarte para una futura compra';

while ( $loop->have_posts() ) : $loop->the_post();
global $product;
echo '<br><a href="'.get_permalink().'">' . get_the_title().'</a>';
endwhile;

wp_reset_query();
}
}

Este código mostrará una lista de productos de la misma categoría de los pedidos por el cliente, fomentando futuras compras.

Y podemos usar el gancho nº 6 para algo así:

add_action( 'woocommerce_email_after_order_table', 'ts_email_after_order_table', 10, 4 );

function ts_email_after_order_table( $order, $sent_to_admin, $plain_text, $email ) {
if ( $order->has_status( 'completed' ) ) : ?>
<p><?php printf( __( 'Hola %1$s. Gracias por tu compra. Para que veas que nos encanta que sigas confiando en nosotros aquí tienes un cupón de descuento para tu próxima compra : %2$s' ), $order->get_billing_first_name(), '<strong>DESCUENTO25</strong>' ); ?></p>
<?php endif;
}

Como puedes adivinar por el texto, le añadimos, justo después de la tabla de su pedido, un código de descuento para su próxima compra, una vez haya completado el pedido.

No hay límites, solo tu imaginación, tu pericia como vendedor, y un poco de conocimiento de los ganchos de WooCommerce y un poquito de HTML, que puedes ir adquiriendo poco a poco leyendo este mismo blog, o contratando a alguien que ya sepa hacer este tipo de personalizaciones.

¿No se pueden hacer estas personalizaciones con plugins?

Sí y no, pero eso ya lo veremos en otro artículo otro día. Así que ya sabes, si aún no te has suscrito estás a tiempo, tienes abajo del todo el formulario, es gratis.