在 WooCommerce email 通知上显示自定义产品图像

Question

我正在尝试修改自动生成的 WooCommerce 订单电子邮件中的产品图像。 请注意，我正在尝试使用钩子来执行此操作，而不是创建修改后的电子邮件模板。

首先，我在单个产品页面上有一个隐藏的输入。 我有一些 JS 设置图像的 ID，它基于产品的颜色（我使用 ACF 制作的自定义属性）。

<input class="js-col-img-id" type="hidden" name="product-col-img-id" value="">

作为参考，这是我为使其在购物车页面上工作所做的工作：

// Add custom attributes to cart item data
add_action('woocommerce_add_cart_item_data', 'jwd_add_custom_attr_to_cart', 10, 3);

function jwd_add_custom_attr_to_cart($cart_item_data, $product_id, $variation_id) {
    $attrs = array(...,'product-col-img-id');

    foreach ($attrs as $attr) {
        $san_attr = filter_input( INPUT_POST, $attr );

        if ( !empty( $san_attr ) ) {
            $cart_item_data[$attr] = $san_attr;
        }
    }

    return $cart_item_data;
}

// This function sets the image ID in the cart, and it displays the image properly
add_action( 'woocommerce_before_calculate_totals', 'bwa_new_price' );
function bwa_new_price($cart) {

    // ...

    $cart_items = $cart->get_cart();

    foreach($cart_items as $item) {
        $data = $item['data'];

        // product-col-img-id is sent through the hidden input when the add to cart form is submitted
        $colour_img_ID = $item['product-col-img-id'] ?? false;

        if ($colour_img_ID) {
            $data->set_image_id($colour_img_ID);
        }
    }
}

// Add custom attributes to order
add_action( 'woocommerce_checkout_create_order_line_item', 'jwd_add_attr_to_order_items', 10, 4 );
function jwd_add_attr_to_order_items( $item, $cart_item_key, $values, $order ) {
    if ( !empty( $values['product-colour'] ) ) {
        $item->add_meta_data( 'Colour', $values['product-colour'] );
    }

    // I tried replicating this for the img ID. It does display it in the var dump mentioned below, and it does display it as an actual label in the e-mail (which I'd want to get rid of). The difficulty then becomes reading the ID through code and setting the product to display that image
    if ( !empty( $values['product-col-img-id'] ) ) {
        $item->add_meta_data( 'col_img_id', $values['product-col-img-id'] );
    }
}

这很好用，但我很难在订单电子邮件中复制它。 到目前为止，我遇到了以下情况。 这显示了电子邮件中的图像，但它是产品的特色图像。 值得注意的是“show_image”键设置为true。

// Add prod IMG to e-mails
function jwd_add_images_woocommerce_emails( $output, $order ) {

    // set a flag so we don't recursively call this filter
    static $run = 0;

    // if we've already run this filter, bail out
    if ( $run ) {
        return $output;
    }

    $args = array(
        'show_image'    => true,
        //'image_size'    => array( 300, 300 ),
    'image_size' => 'full',
    );

    // increment our flag so we don't run again
    $run++;

    // if first run, give WooComm our updated table
    return wc_get_email_order_items($order, $args);
}
add_filter( 'woocommerce_email_order_items_table', 'jwd_add_images_woocommerce_emails', 10, 2 );

为了修改图像，我找到了这个过滤器，但我很难弄清楚我需要做什么来复制我在购物车页面上所做的事情。 我得到的最接近的是$item_data工作，我确实在 var 转储中看到了product-col-img-id键，尽管它位于受保护的 object 中，我不确定如何访问它。 即使我可以访问，我也不确定如何从这里设置图像。

add_filter('woocommerce_order_item_thumbnail', 'jwd_add_colour_img', 10, 2);
function jwd_add_colour_img($image, $item) {
    $item_id = $item->get_id();

    //var_dump($item->get_current_data());

    $product = $item->get_product();
    $product_id = $item->get_product_id();
    $item_data = $item->get_data();
    $col_img_id = false;

    $item->set_image_id(1);

    foreach ($item_data as $key => $item) {
        //current_data

            var_dump($item);




        //echo "<br><br>";
        $col_img_id = $item['product-col-img-id'] ?? false;

        if ($col_img_id) {
            break;
        }
    }

    //var_dump($col_img_id);
    //$item_id = $item->get_product_id();
    //var_dump(wc_get_order_item_meta( $item_id, 'col_img_id', true ) );

    return $image;
}

Answer 1

要获取 WooCommerce 自定义元数据，可以使用WC_Data方法get_meta() 。

请尝试以下操作以在 email 通知上显示您的自定义图像：

// Save custom image ID as order item meta
add_action( 'woocommerce_checkout_create_order_line_item', 'save_custom_image_id_to_order_item', 10, 4 );
function save_custom_image_id_to_order_item( $item, $cart_item_key, $values, $order ) {
    if ( isset($values['product-colour']) && ! empty($values['product-colour']) ) {
        $item->add_meta_data('Colour', $values['product-colour'] );
    }

    if ( isset($values['product-col-img-id']) && ! empty($values['product-col-img-id']) ) {
        $item->add_meta_data('_col_img_id', $values['product-col-img-id'] );
    }
}

// (optional) Force display item image on emails
add_filter( 'woocommerce_email_order_items_args', 'show_image_on_email_notifications' );
function show_image_on_email_notifications( $args ) {
    $args['show_image'] = true;

    return $args;
}

// Display custom image on emails
add_filter( 'woocommerce_order_item_thumbnail', 'display_email_order_item_custom_image', 10, 2 );
function display_email_order_item_custom_image( $image, $item ) {
    // Only on email notifications
    if( is_wc_endpoint_url() )
        return $image;

    $image_id = $item->get_meta('_col_img_id');
    
    if( $image_id ) {
        $image = wp_get_attachment_image( $image_id, array( 32, 32 ), false, array() );
    }

    return $image;
}

代码进入活动子主题（或活动主题）的functions.php文件。 它应该工作。