Show the product thumbnail in WooCommerce emails

, ,

As an admin and customer, you receive some emails from WooCommerce, when the order is created, processing, completed, etc.

From WooCommerce 2.5 there’s also an email sent to the admin when an order status changes to Failed.

Those emails all include a table with the order items purchased. They include by default the product name, the price and the quantity of each item.

If you want you can also include the product thumbnail, but how?

You need to override the default template email-order-details.php and change some code in it.

Start by going to wp-content/plugins/woocommerce/templates/emails/ via FTP and copy the file email-order-details.php.
Then save the copy of this file in wp-content/themes/your-child-theme-name/woocommerce/emails/.

Once saved, open the file and find this code:


<?php echo $order->email_order_items_table( array(
'show_sku' => $sent_to_admin,
'show_image' => false,
'image_size' => array( 32, 32 ),
'plain_text' => $plain_text,
'sent_to_admin' => $sent_to_admin
) ); ?>

As you probably noticed already, the second item in the array is a boolean value that indicates if the product image should show or not.
Change it from 'show_image' => false, to 'show_image' => true,.

That’s it. Now your emails (for the admin and for the customer) will include the product thumbnail, like in the example below:

Order items table with product thumbnail

You can further customize the email style with some custom CSS.

12 replies
  1. Amit Ramani
    Amit Ramani says:

    Thank you for explaining this clearly. I was under the impression that overriding the WC templates was not the ideal way. Using hooks was the preferred way.

    When the WC files get upgraded, these overridden files show up as being outdated. Any thoughts?

    Reply
    • Nicola Mustone
      Nicola Mustone says:

      Hi Amit,
      you are right. The preferred way is by using hooks, but it’s not always possible. In this case you can’t use hooks, so overriding the template is the second best option.

      When the WC files get upgraded, these overridden files show up as being outdated. Any thoughts?

      You will need to apply your changes to the updated template again.

      Reply
  2. Jose Carlos Ramos
    Jose Carlos Ramos says:

    Thanks Nicola Mustone;

    I see only one details, I had to change the ‘$image_size’ to ‘image_size’;
    email_order_items_table( array(
    ‘show_sku’ => $sent_to_admin,
    ‘show_image’ => false,
    ‘$image_size’ => array( 32, 32 ), // change to ‘image_size’
    ‘plain_text’ => $plain_text,
    ‘sent_to_admin’ => $sent_to_admin
    ) ); ?>

    Jose Carlos Ramos Carmenates

    Reply
  3. James
    James says:

    HI, is to possible for the email to show the image assigned to the correct attribute? For example I have a shirt in Black and a shirt in White. My featured image is a Black t-shirt but i also have White images for the White shirt ( I am using a plug-in to show different images depending on the product). However, If I order a White t-shirt I get an email for a White shirt, but it shows a Black t-shirt image (the featured image). Obviously this will be very confusing for the customer so I would like to display the correct image. Possible? Lmk. Thanks!

    Reply
  4. mauro
    mauro says:

    Hi, i have a problem, the image thumb is present into the client email but not in the shop confirmation mail. Can you help me to understand why?

    Reply
  5. nil
    nil says:

    email_order_items_table( array(
    ‘show_sku’ => $sent_to_admin,
    ‘show_image’ => false,
    ‘image_size’ => array( 32, 32 ),
    ‘plain_text’ => $plain_text,
    ‘sent_to_admin’ => $sent_to_admin
    ) ); ?>

    not working for me …..

    Reply
  6. henrik
    henrik says:

    Hi, thank you for this – found a plugin that could do the same but requires for the image to be pretty large in order not to “push” the description on to two lines….

    is there a way to place the image centered ABOVE the product description placing some code in what you posted above?

    thank you so much for sharing 🙂

    // Henrik

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply