Display the product image in Woocommerce email notifications

Question

On Woocommerce, I have changed $show_image variable to true in email order details php template file, but I am still unable to get the image displayed in email notifications:

<div style="margin-bottom: 40px;">
<table class="td" cellspacing="0" cellpadding="6" style="width: 100%; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;" border="1">
    <thead>
        <tr>
            <th class="td" scope="col" style="text-align:<?php echo esc_attr( $text_align ); ?>;"><?php esc_html_e( 'Product', 'woocommerce' ); ?></th>
            <th class="td" scope="col" style="text-align:<?php echo esc_attr( $text_align ); ?>;"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></th>
            <th class="td" scope="col" style="text-align:<?php echo esc_attr( $text_align ); ?>;"><?php esc_html_e( 'Price', 'woocommerce' ); ?></th>
        </tr>
    </thead>
    <tbody>
        <?php
        echo wc_get_email_order_items( $order, array( // WPCS: XSS ok.
            'show_sku'      => $sent_to_admin,
            'show_image'    => true,
            'image_size'    => array( 100, 100 ),
            'plain_text'    => $plain_text,
            'sent_to_admin' => $sent_to_admin,
        ) );
        ?>
    </tbody>
    <tfoot>
        <?php
        $totals = $order->get_order_item_totals();

        if ( $totals ) {
            $i = 0;
            foreach ( $totals as $total ) {
                $i++;
                ?>
                <tr>
                    <th class="td" scope="row" colspan="2" style="text-align:<?php echo esc_attr( $text_align ); ?>; <?php echo ( 1 === $i ) ? 'border-top-width: 4px;' : ''; ?>"><?php echo wp_kses_post( $total['label'] ); ?></th>
                    <td class="td" style="text-align:<?php echo esc_attr( $text_align ); ?>; <?php echo ( 1 === $i ) ? 'border-top-width: 4px;' : ''; ?>"><?php echo wp_kses_post( $total['value'] ); ?></td>
                </tr>
                <?php
            }
        }
        if ( $order->get_customer_note() ) {
            ?>
            <tr>
                <th class="td" scope="row" colspan="2" style="text-align:<?php echo esc_attr( $text_align ); ?>;"><?php esc_html_e( 'Personal Message:', 'woocommerce' ); ?></th>
                <td class="td" style="text-align:<?php echo esc_attr( $text_align ); ?>;"><?php echo wp_kses_post( wptexturize( $order->get_customer_note() ) ); ?></td>
            </tr>
            <?php
        }
        ?>
    </tfoot>
</table>

I need to add link as well to the product image.Once the user click on the image it should redirect to the particular page.

Changed the message from false to true still the image is not displayed in the site.

LoicTheAztec LoicTheAztec · Accepted Answer · 2018-12-04T09:05:40

To display the image in Email notifications, revert back your changes to original template and use instead:

add_filter( 'woocommerce_email_order_items_args', 'custom_email_order_items_args', 10, 1 );
function custom_email_order_items_args( $args ) {
    $args['show_image'] = true;

    return $args;
}

To add the product link to the image and to the item name (optionally) you will use:

add_filter( 'woocommerce_order_item_thumbnail', 'add_email_order_item_permalink', 10, 2 ); // Product image
add_filter( 'woocommerce_order_item_name', 'add_email_order_item_permalink', 10, 2 ); // Product name
function add_email_order_item_permalink( $output_html, $item, $bool = false ) {
    // Only email notifications
    if( is_wc_endpoint_url() )
        return $output_html;

    $product   = $item->get_product();

    return '<a href="'.esc_url( $product->get_permalink() ).'">' . $output_html . '</a>';
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Thumbnail size change:

You can also manipulate the thumbnail size in this hook which is by default 32 x 32 pixels using under $args['show_image'] = true; adding this line:

$args['image_size'] = array( 48, 48 );

Tested and works too.

Display the product image in Woocommerce email notifications

1 Answers