在 Woocommerce 电子邮件通知中显示产品图片 [英] Display the product image in Woocommerce email notifications

问题描述

在 Woocommerce 上，我已将电子邮件订单详细信息 php 模板文件中的 $show_image 变量更改为 true，但我仍然无法获取电子邮件通知中显示的图像:

<table class="td" cellspacing="0" cellpadding="6" style="width: 100%; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;"边框="1"><头><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><?phpecho wc_get_email_order_items( $order, array(//WPCS: XSS ok.'show_sku' =>$sent_to_admin,'show_image' =>真的，'图像大小' =>数组( 100, 100 ),'纯文本' =>$plain_text,'sent_to_admin' =>$sent_to_admin,) );?></tbody><脚><?php$totals = $order->get_order_item_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}}如果 ( $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( '个人信息:', '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>

我还需要添加到产品图片的链接.一旦用户点击图片，它应该重定向到特定页面.

将消息从 false 更改为 true 仍然图像未显示在站点中.

解决方案

要在电子邮件通知中显示图像，请将更改恢复到原始模板并改用:

add_filter( 'woocommerce_email_order_items_args', 'custom_email_order_items_args', 10, 1 );函数 custom_email_order_items_args( $args ) {$args['show_image'] = true;返回 $args;}

要将产品链接添加到图片和商品名称(可选)，您将使用:

add_filter( 'woocommerce_order_item_thumbnail', 'add_email_order_item_permalink', 10, 2 );//产品图片add_filter( 'woocommerce_order_item_name', 'add_email_order_item_permalink', 10, 2 );//产品名称函数 add_email_order_item_permalink( $output_html, $item, $bool = false ) {//仅电子邮件通知if( is_wc_endpoint_url() )返回 $output_html;$product = $item->get_product();return '<a href="'.esc_url( $product->get_permalink() ).'">'.$output_html .'</a>';}

代码位于活动子主题(或活动主题)的 function.php 文件中.经测试有效.

<小时>

缩略图大小更改:

您还可以在此钩子中操作缩略图大小，默认情况下为 32 x 32 像素，在 $args['show_image'] = true; 下添加此行:

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

经过测试也能正常工作.

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.

解决方案

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.

这篇关于在 Woocommerce 电子邮件通知中显示产品图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！