在Woocommerce电子邮件通知中显示产品图片

时间:2018-12-04 08:39:25

标签: woocommerce

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

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

我还需要在产品图片上添加链接。一旦用户单击图片,它应该重定向到特定页面。

将消息从“ false”更改为“ true”,但是图像未显示在站点中。

enter image description here

1 个答案:

答案 0 :(得分:1)

要在电子邮件通知中显示图像,请将您的更改还原为原始模板,并使用:

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;
}

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

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>';
}

代码进入您的活动子主题(或活动主题)的function.php文件中。经过测试,可以正常工作。


缩略图大小更改:

您也可以在此挂钩中操作缩略图的大小,默认情况下,使用$args['show_image'] = true;下的以下行添加缩略图,即为32 x 32像素:

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

经过测试并且可以使用。