Nicola Mustone

Happiness Lead @ Automattic



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:

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.


Subscribe to This Blog

Receive new articles from this blog directly in your inbox! No spam guaranteed!

Join 669 other subscribers

12 responses to “Show the product thumbnail in WooCommerce emails”

  1. 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?

    1. 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.

  2. What if you would like to hide the price?

    1. HI Daniel,
      To do that you need to override and edit the templates in your theme and remove the price directly from the code.

      You can learn how to override templates here.

  3. Jose Carlos Ramos Avatar
    Jose Carlos Ramos

    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

    1. Hi Jose,
      You’re right! I Fixed that, thanks!

  4. 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!

  5. 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?

  6. 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 …..

  7. Thank for good example

    1. You’re welcome!

  8. 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

Leave a Reply

You Might Also Like These Articles


Contribute to Improving This Blog

Did you enjoy this article? Was it helpful? Contribute to help me write more articles! The funds collected from this blog are reinvested directly into improving my skills or the blog so that I can provide more and better content!

One-Time
Monthly
Yearly

Make a one-time donation

Make a monthly donation

Make a yearly donation

Choose an amount

€1.00
€5.00
€10.00
€5.00
€15.00
€100.00
€5.00
€15.00
€100.00

Or enter a custom amount


Your contribution is appreciated.

Your contribution is appreciated.

Your contribution is appreciated.

DonateDonate monthlyDonate yearly

Don't Miss a Thing!

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 669 other subscribers

Continue Reading

Discover more from Nicola Mustone

Subscribe now to keep reading and get access to the full archive.

Continue reading