解决WooCommerce购物车等场景下货币符号图片HTML转义问题

问题根源 #

你的代码存在三个核心问题导致HTML被转义：

1. 手动使用了HTML实体（如<、"），直接输出转义文本而非原始HTML
2. 部分WooCommerce钩子的参数个数不匹配，导致函数逻辑异常
3. 邮件场景下的HTML输出规则与前端不同，统一用wp_kses_post会触发二次转义

修正后的代码 #

function sar_svg_force_png_in_cart_and_checkout($price, $cart_item = null, $cart_item_key = null, $additional_param = null) {
    $png_url = get_option('sar_svg_png_url', '');

    if (empty($png_url)) {
        return $price;
    }

    // 移除现有货币符号避免重复
    $price = preg_replace('/(\s?SAR|\s?ر\.س|\s?ريال)/u', '', $price);

    // 检查是否已包含图片，避免重复添加
    if (strpos($price, 'sar_svg_symbol.png') !== false) {
        return $price;
    }

    // 直接使用原始HTML，不手动转义实体
    $svg_html = sprintf(
        ' <span class="sar-svg-symbol"><img src="%s" alt="SAR Symbol" style="display:inline-block; width:20px; height:auto; vertical-align:middle;"></span>',
        esc_url($png_url)
    );

    $formatted_price = trim($price) . $svg_html;

    // 邮件场景特殊处理：跳过wp_kses_post，避免二次转义
    if (did_action('woocommerce_email_before_order_table')) {
        return $formatted_price;
    }

    return wp_kses_post($formatted_price);
}

// 修正钩子参数个数，匹配WooCommerce官方定义
add_filter('woocommerce_cart_item_price', 'sar_svg_force_png_in_cart_and_checkout', PHP_INT_MAX, 3);
add_filter('woocommerce_cart_item_subtotal', 'sar_svg_force_png_in_cart_and_checkout', PHP_INT_MAX, 3);
add_filter('woocommerce_cart_totals_order_total_html', 'sar_svg_force_png_in_cart_and_checkout', PHP_INT_MAX); // 仅1个参数
add_filter('woocommerce_order_formatted_line_subtotal', 'sar_svg_force_png_in_cart_and_checkout', PHP_INT_MAX, 3);
add_filter('woocommerce_email_order_item_subtotal', 'sar_svg_force_png_in_cart_and_checkout', PHP_INT_MAX, 4); // 含$subtotal, $item, $order, $plain_text四个参数
add_filter('woocommerce_email_order_total', 'sar_svg_force_png_in_cart_and_checkout', PHP_INT_MAX, 2); // 含$total, $order两个参数

关键改动说明 #

1. 移除手动HTML实体：直接编写<span>、"等原始HTML标签，避免输出转义后的文本
2. 匹配钩子参数个数：严格按照WooCommerce官方钩子定义传递参数数量，避免函数逻辑错误
3. 邮件场景单独处理：通过检测woocommerce_email_before_order_table动作，判断当前处于邮件模板渲染流程，直接返回HTML（邮件模板默认支持HTML输出，无需额外转义）
4. 使用sprintf格式化HTML：提升代码可读性，同时保证esc_url正确处理图片链接的安全性

额外注意事项 #

• 确保WooCommerce邮件设置开启HTML模式：进入WooCommerce > 设置 > 邮件，点击对应邮件模板，确认"HTML"选项已勾选
• 修改代码后清除WordPress缓存及浏览器缓存，确保改动生效
• 若使用SVG图片，需先通过代码或插件开启WordPress的SVG上传权限

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