No es ningún secreto que aunque WooCommerce es una solución muy práctica para configurar un e-commerce con WordPress, tiene algunos puntos difíciles de personalizar, entre ellos los emails que se envían, tanto al cliente como al gestor de la tienda.
Una de las cosas que más me suelen pedir en cuanto a los emails de WooCommerce es poder añadir la foto del producto en el email con los detalles del pedido que se envía al realizarse una compra.
De esta forma, para según que tipo de productos, es mucho más fácil y visual ver lo que se ha comprado.
En este artículo vamos a ver dos formas de hacerlo, la primera, más sencilla, es mediante una función en el archivo functions.php de nuestro tema. Sin embargo en algunos casos, hay quien no le acaba de funcionar bien y sólo le muestra la foto en el mail del administrador, no la que se envía al cliente.
Por eso veremos una 2ª opción, algo más compleja, pero que os puede funcionar si la primera no lo hace.
Opción A: mediante función
Sólo tenemos que añadir la función a continuación, en el archivo functions.php de tu tema, o en un plugin propio o en uno de snippets como code snippet
function dpw_add_images_woocommerce_emails( $output, $order ) {
static $run = 0;
if ( $run ) {
return $output;
}
$args = array(
'show_image' => true,
'image_size' => array( 100, 100 ),
);
$run++;
return wc_get_email_order_items( $order, $args );
}
add_filter( 'woocommerce_email_order_items_table', 'dpw_add_images_woocommerce_emails', 10, 2 );
Una opción bien fácil y simple para poder mostrar la imagen del producto en el email sin necesidad de plugins adicionales.
Opción B: editando la plantilla de emails de WooCommerce
En esta segunda opción lo que haremos es sobreescribir la plantilla que viene con WooCommerce para modificarla a nuestro gusto, en este caso añadiendo la foto de producto.
Para ello, seguiremos los siguientes pasos:
1- Buscaremos el archivo email-order-templates.php, que se encuentra en la carpeta wp-content/plugins/woocommerce/templates/emails/
y lo copiaremos en una nueva carpeta que crearemos en nuestro theme o child theme
/wp-content/themes/childthemeactivo/woocommerce/emails
(Ojo que no tenemos que crear la carpeta /templates, sino directamente la de /emails )
2- Editaremos el archivo email-order-templates.php que hemos duplicado y buscaremos el código siguiente (se encuentra sobre la línea 51 del archivo)
<?php echo wc_get_email_order_items( $order, array( // WPCS: XSS ok. 'show_sku' => $sent_to_admin, 'show_image' => false, 'image_size' => array( 32, 32 ), 'plain_text' => $plain_text, 'sent_to_admin' => $sent_to_admin, ) ); ?>
Modificaremos los atributos ‘show_image’ y ‘image_size’ para que muestre la imagen y del tamaño que le digamos:
<?php echo wc_get_email_order_items( $order, array( // WPCS: XSS ok. 'show_sku' => $sent_to_admin, 'show_image' => true, 'image_size' => array( 100, 100 ), 'plain_text' => $plain_text, 'sent_to_admin' => $sent_to_admin, ) ); ?>
Esta segunda forma es la que se suele utilizar en general para modificar los estilos y plantillas de los emails enviados por WooCommerce. Es importante realizar los cambios en una copia del archivo guardada en la carpeta de nuestro tema ya que de esta forma no perderemos las modificaciones cuando WooCommerce se actualice.
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
24 respuestas a «Añadir la foto del producto en el email de pedido con WooCommerce»
|
Hola
El código esta lleno de cosas rara que me dan error tipo =>
Gracias
|
Hola Miguel!
Ya está solucionado, son los caracteres < y >, que a veces no los coge bien.
Saludos!
|
Hola! Pero solo me aparece en el email del propietario de tienda, NO en el que se envía a cliente. Qué puede pasar?
|
Qué extraño, yo lo tengo así y en el email al cliente también aparece la foto.
Revisaré a ver si encuentro cual puede ser el problema…
Saludos!
|
Genial!
Igual hay que añadirlo a algún otro archivo además del functions del tema?
Pues ya me comentas! Un saludo!
|
Me ocurre lo mismo!
Solo se ve en el mail que llega al propietario! el cliente no lo ve hasta que no pasas el pedido a completado.
versión de woocommerce: 3.5.1
Template Genesis
|
Hola David!
En ese caso deberéis modificar los archivos de plantilla de emails de WooCommerce para añadir la imagen.
En breve ampliaré este artículo indicando cómo hacerlo.
Saludos!
|
Gracias, estaré esperando esa nueva Entrada.. Saludos
|
Hola Ivan! Ya he añadido la segunda opción para modificar los emails, a ver si os sirve.
Saludos!
|
Hola Esther,
Funciona!!!!
Muy bien, ahora queda MUCHO mejor cara al cliente.
Muchas GRACIASS
Ahh,,, ya que estoy.. ¿Cúal sería el template, para los emails a clientes que están a la espera? (Yo tengo la opción de Ingreso por cuenta) y cuando el cliente hace un pedido, le llega un email diciendo que estamos a la espera del pago…
¿Cuál es esa página? (así le añado también la img de los productos)
Gracias
|
Hola Ivan!
Diría que debe ser el template customer-on-hold-order.php, pero deberás mirar a que hooks llama dentro, porque los emails en WooCommerce cargan sub-plantillas en función de la información que muestran. Te aconsejo «trastear» un poco en las plantillas y probar en staging para acabar de ajustar los emails como quieres.
Saludos!
|
Hola, gracias por tu código, sin embargo requiero que en el mail que manda wocommerce también aparezca la descripción del producto comprado?? tienes idea de como hacerlo? gracias un saludo
|
Hola Eduardo!
No lo he probado, pero teóricamente debería funcionarte añadiendo:
post->post_excerpt ); ?>en el archivo de la plantilla del email email-order-items.php
(en caso de los productos, el extracto corresponde a la descripción corta)
Saludos!
|
Hola Esther, gracias por responder,
hice la prueba, y coloque la linea de código en el archivo que mencionas, sin embargo no lo hizo, pero lo puse en email-order-details.php y si jala información, pero no es la de la descripción corta de cada producto, anexo captura del código y de la ubicación que le di, tendras algún tip para resolverlo?, te agradezco por tu tiempo
https://subefotos.com/ver/?72f03e04bf1ada944eda87c88db3ed58o.png
|
Pues una maravilla. Estos detallitos que parecen poca cosa, hacen importante una web. Muchas gracias.
Un saludo.
|
Hola Esther,
Es fantástico que compartas esto con nosotros.
A mi el código me funciona perfectamente, sin embargo en el archivo error_log me sale constantemente este warning:
The WC_Order::email_order_items_table function is deprecated since version 3.0. Replace with wc_get_email_order_items
Un saludo!
|
Muchas gracias Tomás! ya he actualizado el script para sustituir la función obsoleta.
Saludos!!
|
Gracias a ti Esther,
Ahora ya no da ese warning.
Saludos!!
|
Gracias por compartir. Buen tutorial.
Un saludo!
|
Hola, Excelente tutorial, te hago una consulta.
Si quiero una imagen de la galería del producto , como puedo lograrlo?
Gracias
Saludos
|
Hola German,
Si siempre es la misma imagen, tendrías editar la plantilla de los emails donde quieres que se muestre y añadirla o mediante un hook de WooCommerce.
Si encuentro algo parecido que te pueda servir de ejemplo te lo digo.
Saludos!
|
Hola Esther, gracias por el tutorial!
Consigo que se muestren las imagenes de los productos en los correos aunque me salen al lado de un cuadro como de imagen con enlace roto, como si se quisieran mostrar 2 imagenes por producto pero sólo se muestra la segunda, y en realidad solo tengo una imagen por producto. Tienes alguna idea que puede estar causando este error?
Muchas gracias
Saludos
|
Hola Esther,
¿Qué opción del post estás utilizando?
Saludos,
|
La segunda, he generado las subcarpetas WooCommerce/emails dentro de mi tema (astra) y he copiado el archivo adaptado del email-order-templates.php (que creo que se ha actualizado a email-order-details.php, almenos en mi WooCommerce 5.0.0).
Muchas gracias de nuevo por la atención.
Saludos