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
 * @community     https://businessbloomer.com/club/
 */

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

14 thoughts on “WooCommerce: Show Product Image @ Emails

  1. Hi,

    Has anyone else had a problem that the images in the emails are randomly showed and not showed?

    For example an order email arrives, and it has the images the next two emails might not have the images showing etc. This happens completely randomly.

    I’ve created thumbnails for the 64x64px image size that we use in emails. It also doesn’t matter if the product in question is simple or variable (all our product variables have their own images).

    1. Not sure, it would be nice to see if you have any PHP error in your code

  2. This is amazing and solved my picture email issue that i have been at for a long time, legend.

  3. Hi Rodolfo,
    Thank you very much for sharing!
    Is there a way to add these images just on email received by the company (not clients emails)?
    Thanks!

    1. Hello Mar, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

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

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

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

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

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

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

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!

Your email address will not be published. Required fields are marked *