Show product thumbnail on woocommerce New Order email

Question

I have a WordPress / WooCommerce site running and I'd like to edit the email that admins receive, when an new order is received, to show the thumbnail of the product. I copied the template to my theme directory -/themes/mytheme/woocommerce/emails/admin-new-order.php:

    <?php echo $order->email_order_items_table( true, false, true, true, array( 150, 150 )     ); ?>

And this is the code from woocommerce/classes/class-wc-order.php file:

    /**
 * Output items for display in html emails.
 *
 * @access public
 * @param bool $show_download_links (default: false)
 * @param bool $show_sku (default: false)
 * @param bool $show_purchase_note (default: false)
 * @param bool $show_image (default: false)
 * @param array $image_size (default: array( 32, 32 )
 * @param bool plain text
 * @return string
 */
public function email_order_items_table( $show_download_links = false, $show_sku = false, $show_purchase_note = false, $show_image = false, $image_size = array( 32, 32), $plain_text = false ) {

    ob_start();

    $template = $plain_text ? 'emails/plain/email-order-items.php' : 'emails/email-order-items.php';

    woocommerce_get_template( $template, array(
        'order'                 => $this,
        'items'                 => $this->get_items(),
        'show_download_links'   => $show_download_links,
        'show_sku'              => $show_sku,
        'show_purchase_note'    => $show_purchase_note,
        'show_image'            => $show_image,
        'image_size'            => $image_size
    ) );

    $return = apply_filters( 'woocommerce_email_order_items_table', ob_get_clean() );

    return $return;
}

This is the code from /plugins/woocommerce/templates/emails

<?php
 /**
  * Email Order Items
  *
  * @author         WooThemes
  * @package    WooCommerce/Templates/Emails
  * @version     2.0.3
  */

      if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

      global $woocommerce;

      foreach ($items as $item) :

// Get/prep product data
$_product = $order->get_product_from_item( $item );
$item_meta = new WC_Order_Item_Meta( $item['item_meta'] );
$image = ($show_image) ? '<img src="/wp/'. current(wp_get_attachment_image_src( get_post_thumbnail_id( $_product->id ), 'thumbnail')) .'" alt="img" height="'.$image_size[1].'" width="'.$image_size[0].'" style="vertical-align:middle; margin-right: 10px;" />' : '';

?>
<tr>
    <td style="text-align:left; vertical-align:middle; border: 1px solid #eee; word-wrap:break-word;"><?php

        // Show title/image etc
        echo    apply_filters( 'woocommerce_order_product_image', $image, $_product, $show_image);

        // Product name
        echo    apply_filters( 'woocommerce_order_product_title', $item['name'], $_product );

        // SKU
        echo    ($show_sku && $_product->get_sku()) ? ' (#' . $_product->get_sku() . ')' : '';

        // File URLs
        if ( $show_download_links && $_product->exists() && $_product->is_downloadable() ) {

            $download_file_urls = $order->get_downloadable_file_urls( $item['product_id'], $item['variation_id'], $item );

            $i = 0;

            foreach ( $download_file_urls as $file_url => $download_file_url ) {
                echo '<br/><small>';

                $filename = woocommerce_get_filename_from_url( $file_url );

                if ( count( $download_file_urls ) > 1 ) {
                    echo sprintf( __('Download %d:', 'woocommerce' ), $i + 1 );
                } elseif ( $i == 0 )
                    echo __( 'Download:', 'woocommerce' );

                echo ' <a href="' . $download_file_url . '" target="_blank">' . $filename . '</a></small>';

                $i++;
            }
        }

        // Variation
        echo    ($item_meta->meta) ? '<br/><small>' . nl2br( $item_meta->display( true, true ) ) . '</small>' : '';

    ?></td>
    <td style="text-align:left; vertical-align:middle; border: 1px solid #eee;"><?php echo $item['qty'] ;?></td>
    <td style="text-align:left; vertical-align:middle; border: 1px solid #eee;"><?php echo $order->get_formatted_line_subtotal( $item ); ?></td>
</tr>

<?php if ($show_purchase_note && $purchase_note = get_post_meta( $_product->id, '_purchase_note', true)) : ?>
    <tr>
        <td colspan="3" style="text-align:left; vertical-align:middle; border: 1px solid #eee;"><?php echo apply_filters('the_content', $purchase_note); ?></td>
    </tr>
<?php endif; ?>

And this is the result, an email with no thumbnail image. I've changed the alt attribute and the image size several times and it worked fine, however, the img src is still missing.

<td style="text-align:left;vertical-align:middle;border:1px solid #eee;word-wrap:break-   word">
<img alt="img" height="150" width="150" style="vertical-align:middle;margin-right:10px">prueba test<br><small></small>
</td>

What am I doing wrong? Thanks for any help!

Answer 1

WC already have this in the code, you just need to enable it from the template file. Place WooCommerce directory inside your theme and go to:

/wp-content/themes/YOUR THEME NAME/woocommerce/emails

From the file email-order-details.php find this code:

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

and replace it with this:

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

All done.

Answer 2

I know, old question, but I just wanted to point out (in case someone wonders) that the issue was very likely due to the wrong URL format passed to the img tag inside the file woocommerce/templates/emails/email-order-items.php:

$image = ($show_image) ? '<img src="/wp/'. current(wp_get_attachment_image_src( get_post_thumbnail_id( $_product->id ), 'thumbnail')) .'" alt="img" height="'.$image_size[1].'" width="'.$image_size[0].'" style="vertical-align:middle; margin-right: 10px;" />' : '';

Inside the src attribute has been wrongly added /wp/ at the beginning, and this would've caused an URL like:

'/wp/http://www.website.com/path/to/the/image.jpg'