如何在WooCommerce邮件通知中将商品缩略图背景设为白色

完全可以通过添加CSS实现需求，无需修改原始PNG图片，同时保留图片的透明度。具体方案如下：

实现步骤 #

1. 注入邮件自定义CSS #

通过WooCommerce的woocommerce_email_styles钩子，将自定义CSS添加到邮件样式中，避免修改核心文件。将以下代码添加到你的主题functions.php文件或自定义插件中：

add_action( 'woocommerce_email_styles', 'custom_email_product_image_css', 10, 2 );
function custom_email_product_image_css( $css, $email ) {
    // 自定义邮件图片样式
    $custom_css = '
        /* 给商品图片容器添加背景色（推荐方案） */
        .woocommerce-order-items .product-image {
            background-color: #f0f0f0; /* 替换为你需要的颜色值 */
            padding: 6px; /* 可选：给图片周围添加背景色边距 */
            display: inline-block; /* 让容器适配图片尺寸 */
            border-radius: 4px; /* 可选：添加圆角效果 */
        }
    ';
    return $css . $custom_css;
}

2. 样式说明 #

• 选择器说明：.woocommerce-order-items .product-image是WooCommerce默认邮件中商品图片的容器类名，如果你的邮件模板有自定义结构，可以发送测试邮件后查看HTML源码，确认实际的元素类名替换即可。
• 背景色设置：将#f0f0f0替换为你需要的颜色（支持十六进制、RGB、颜色名称等格式）。
• 保留透明度：因为你的PNG图片是透明的，容器的背景色会透过图片的透明区域显示，完全保留原始图片的透明效果。
• 可选样式：padding可以让图片周围出现一圈背景色边框，border-radius可以给背景添加圆角，根据设计需求调整即可。

3. 修复现有代码 #

你提供的开启邮件缩略图的代码遗漏了返回值，补上后才能正常生效：

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

4. 测试效果 #

在WooCommerce后台找到任意订单，点击「发送处理中邮件」（或其他订单邮件类型）给自己，查看收件箱中的邮件，确认商品缩略图背景色是否生效。

内容的提问来源于stack exchange，提问作者user22607887