WooCommerce: Show Product Image @ Emails

By default, WooCommerce does not display the product thumbnail inside the order emails.

With this little trick, however, you can revert this default behavior and indeed show images beside their product name inside the email order item table. Enjoy!

With the snippet below, it is possible to display product thumbnails inside WooCommerce order emails. Nice, isn’t it?

PHP Snippet: Show Product Images @ WooCommerce Emails

/**
 * @snippet       Product Thumbnails @ WooCommerce Order Emails
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_email_order_items_args', 'bbloomer_order_with_product_images', 9999 );

function bbloomer_order_with_product_images( $args ) {
	$args['show_image'] = true;
	return $args;
}

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

WooCommerce: Add Content to a Specific Order Email
Customizing WooCommerce emails via the WordPress dashboard is not easy and – sometimes – not possible. For example, you can’t edit or add content to them unless you’re familiar with code. Well, here’s a quick example to learn how to add content to any WooCommerce default order email. In this case study, our goal is […]
WooCommerce: How to Add a Custom Checkout Field
Let’s imagine you want to add a custom checkout field (and not an additional billing or shipping field) on the WooCommerce Checkout page. For example, it might be a customer licence number – this has got nothing to do with billing and nothing to do with shipping. Ideally, this custom field could show above the […]
WooCommerce Visual Hook Guide: Emails
WooCommerce customizers: the Visual Hook Guide is back! Here’s a visual HTML hook guide for the WooCommerce Emails. This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations. Let me know in the comments if this […]
WooCommerce: Add To: Cc: Bcc: Email Recipients
The WooCommerce Email Settings allow you to add custom recipients only for New Order, Cancelled Order, Failed Order and all admin-only emails. But what if you want to add an email recipient to a customer email e.g. the Completed Order one? For example, you need to send it to your dropshipper. Also, you might want […]
WooCommerce: Remove Link to Product @ Order Table
There is a slightly annoying thing on the WooCommerce Thank-You Page and WooCommerce emails. Users looking at the order table can actually click on the Products they just purchased and abandon the page before taking the action you want them to take (see image below). So, I coded a simple PHP snippet to remove such […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

8 thoughts on “WooCommerce: Show Product Image @ Emails”

Michael P McHugh
September 2, 2023

Is there a way to have these be un-cropped?

The thumbnails used in the emails seem to always be cropped even though both WordPress and WooCommerce are set to NOT crop thumbnails—they should be scaled proportionally to fit the thumbnail size.

Thanks,
Michael

Reply
1. Rodolfo Melogli
  September 8, 2023
  Thanks for your comment Michael! You can also redefine the $args[‘image_size’] option inside the filter, by default this is an array with dimensions:
  
  array( 32, 32 )
  
  If that’s not enough, you should look into the ‘woocommerce_product_get_image’ filter, which would allow you to customize the image wherever it’s called.
  Reply
Sven
April 14, 2023

How could I replace the default Woocommerce placeholder when a variation does not have an image, and replace it by its Variable product image?

Reply
1. Rodolfo Melogli
  April 25, 2023
  
  Inside the emails?
  
  Reply
Julie
January 5, 2023

BIG thank you, Rodolfo!

Your “Show Product Image” snippet is a good improvement on the standard Woo emails and adds to the professional look of the Woo emails. Nice!

Can I please suggest an improvement?

The image thumbnail added to the email is 1 cm square and there is 0 padding between the image thumbnail and the text description of the item purchased.

My actual Thumbnail size is 150 x 215 as set in Admin Dashboard >> Settings >> Media.

I don’t know if this is happening to just me or not. Do you know if the email thumbnail size and padding can be improved?

Thank You, and Happy New Year
Julie

Reply
1. Rodolfo Melogli
  January 13, 2023
  Thank you Julie! You can also set the ‘image_size’ parameter, and give it an array of dimensions e.g.:
  
  $args['image_size'] = array( 150, 215 );
  
  As for the padding, please refer to https://www.businessbloomer.com/woocommerce-add-css-woocommerce-emails/
  Reply
  1. Julie
    February 4, 2023
    
    Hey Rodolfo,
    
    Sorry, I forgot to include a screenshot in my previous comment.
    
    Please see for details of where I need to add CSS: https://prnt.sc/R3g5vskPWKN9
    
    Thank You,
    Julie
    
    Reply
    1. Rodolfo Melogli
      February 28, 2023
      
      Thank you! Yes, https://www.businessbloomer.com/woocommerce-add-css-woocommerce-emails/ should help you
      
      Reply

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!