如何调整WooCommerce邮件通知中订单商品图片的展示位置

原有代码中cw_edit_order_item_name 函数插入了过多换行标签、SKU展示位置不合理是导致布局错位的核心原因，以下是修正后可直接使用的完整代码：

// 配置邮件商品基础展示规则
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;
    $args['image_size'] = array( 48, 48 ); // 可自定义调整图片大小
    $args['show_sku'] = true;
    return $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 );
function add_email_order_item_permalink( $output_html, $item, $bool = false ) {
    if( is_wc_endpoint_url() )
        return $output_html;
    $product = $item->get_product();
    return '<a href="'.esc_url( $product->get_permalink() ).'">' . $output_html . '</a>';
}

// 调整商品标题和SKU的展示格式，移除多余换行
add_filter( 'woocommerce_order_item_name', 'cw_edit_order_item_name', 20 );
function cw_edit_order_item_name( $name ) {
    global $item;
    $product = $item->get_product();
    return $name . '<br><small><strong>SKU：</strong>' . $product->get_sku() . '</small>';
}

// 注入自定义CSS控制表格布局
add_filter( 'woocommerce_email_styles', 'custom_email_order_table_styles' );
function custom_email_order_table_styles( $css ) {
    $css .= '
    /* 加宽订单商品表格整体宽度 */
    .woocommerce-order-items table {
        width: 100% !important;
        max-width: 680px !important;
        margin: 0 auto !important;
    }
    /* 固定商品图片列宽度，左对齐展示 */
    .woocommerce-order-items .order_item td:first-child {
        width: 60px !important;
        padding: 12px 8px 12px 0 !important;
        vertical-align: top !important;
    }
    /* 商品标题列左对齐，和图片顶部对齐 */
    .woocommerce-order-items .order_item td:nth-child(2) {
        text-align: left !important;
        padding: 12px 0 !important;
        vertical-align: top !important;
    }
    /* 移动端响应式适配 */
    @media only screen and (max-width: 480px) {
        .woocommerce-order-items table {
            width: 100% !important;
        }
        .woocommerce-order-items .order_item td:first-child {
            width: 50px !important;
        }
    }
    ';
    return $css;
}

调整说明 #

• 移除了原有商品标题前后多余的换行标签，将SKU调整到标题下方左对齐，避免布局错乱
• 固定商品图片列宽度，保证图片始终展示在标题左侧，内容对齐整齐
• 表格整体宽度加宽到680px，可自行修改max-width数值适配需求
• 新增移动端响应式规则，小屏幕下自动适配宽度不会溢出
• 完全保留原有商品跳转链接、SKU展示的需求

效果参考 #

预期实现效果：

修改前当前效果：

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