Añadir la foto del producto en el email de pedido con WooCommerce

Snippet para poder mostrar las fotos de los productos comprados en el email de confirmación de pedido de WooCommerce


por

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.

Nota: si te interesa conocer a fondo cómo se estructuran los emails de WooCommerce y cómo personalizarlos por código, no te pierdas el tutorial de la Zona DWP: Modificar los emails en WooCommerce

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 );

 

NOTA:  el código anterior utilizaba la función WC_Order::email_order_items_table en lugar de wc_get_email_order_items (), pero aunque funcionaba, aparecía un aviso en el error_log de que era una función obsoleta ( The WC_Order::email_order_items_table function is deprecated since version 3.0. Replace with wc_get_email_order_items ). Gracias a Tomás por apuntarlo en los comentarios!

 

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»

  1. Avatar de Miguel

    |

    Hola
    El código esta lleno de cosas rara que me dan error tipo =&gt

    Gracias

    1. Avatar de esther

      |

      Hola Miguel!
      Ya está solucionado, son los caracteres < y >, que a veces no los coge bien.

      Saludos!

  2. Avatar de Marta

    |

    Hola! Pero solo me aparece en el email del propietario de tienda, NO en el que se envía a cliente. Qué puede pasar?

    1. Avatar de esther

      |

      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!

      1. Avatar de marta

        |

        Genial!
        Igual hay que añadirlo a algún otro archivo además del functions del tema?
        Pues ya me comentas! Un saludo!

      2. Avatar de David

        |

        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

        1. Avatar de esther

          |

          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!

  3. Avatar de Ivan

    |

    Gracias, estaré esperando esa nueva Entrada.. Saludos

    1. Avatar de esther

      |

      Hola Ivan! Ya he añadido la segunda opción para modificar los emails, a ver si os sirve.

      Saludos!

      1. Avatar de Ivan

        |

        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

        1. Avatar de esther

          |

          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!

  4. Avatar de eduardo

    |

    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

    1. Avatar de esther

      |

      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!

      1. Avatar de eduardo

        |

        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

  5. Avatar de Raúl SantubearSex

    |

    Pues una maravilla. Estos detallitos que parecen poca cosa, hacen importante una web. Muchas gracias.
    Un saludo.

  6. Avatar de Tomás

    |

    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!

    1. Avatar de esther

      |

      Muchas gracias Tomás! ya he actualizado el script para sustituir la función obsoleta.

      Saludos!!

      1. Avatar de Tomás

        |

        Gracias a ti Esther,
        Ahora ya no da ese warning.
        Saludos!!

  7. Avatar de VETORIANO

    |

    Gracias por compartir. Buen tutorial.
    Un saludo!

  8. Avatar de German

    |

    Hola, Excelente tutorial, te hago una consulta.

    Si quiero una imagen de la galería del producto , como puedo lograrlo?

    Gracias

    Saludos

    1. Avatar de esther

      |

      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!

  9. Avatar de Esther

    |

    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

    1. Avatar de esther

      |

      Hola Esther,
      ¿Qué opción del post estás utilizando?

      Saludos,

      1. Avatar de Esther

        |

        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