WooCommerce支付方式Logo显示异常：仅显示替代文本求助

问题概述 #

尝试通过自定义函数将WooCommerce信用卡支付方式名称替换为对应Logo，但图片未渲染，仅显示替代文本（alt内容）。确认图片URL可直接访问，使用的原函数如下：

function replace_card_type_with_logo($card_type) {
$card_type = strtolower($card_type);

$card_logos = array(
'visa' => 'http://symbiosewear.com/wp-content/uploads/2023/06/visa.png',
'mastercard' => 'http://symbiosewear.com/wp-content/uploads/2023/06/mastercard.png',
'amex' => 'http://symbiosewear.com/wp-content/uploads/2023/06/amex.png',
);

if (isset($card_logos[$card_type])) {
$card_logo = $card_logos[$card_type];
return '<img src="' . $card_logo . '" alt="' . $card_type . '">';
}

return wp_kses_post($card_type);
}

add_filter('woocommerce_get_credit_card_type_label', 'replace_card_type_with_logo');

问题截图：

问题原因 #

1. HTML标签被转义为纯文本：原函数返回的img标签使用了HTML实体（<、"），导致WordPress/WooCommerce将其识别为普通文本，无法渲染成图片元素。
2. 未做安全过滤：直接返回未过滤的HTML可能被WordPress安全机制或WooCommerce后续过滤规则拦截，导致标签被剥离。

修复方案 #

修改函数，取消HTML实体转义，改用正常HTML标签，并通过WordPress安全函数处理内容，确保渲染正常且符合安全规范：

function replace_card_type_with_logo($card_type) {
    $card_type = strtolower($card_type);

    $card_logos = array(
        'visa'       => 'http://symbiosewear.com/wp-content/uploads/2023/06/visa.png',
        'mastercard' => 'http://symbiosewear.com/wp-content/uploads/2023/06/mastercard.png',
        'amex'       => 'http://symbiosewear.com/wp-content/uploads/2023/06/amex.png',
    );

    if (isset($card_logos[$card_type])) {
        $card_logo = $card_logos[$card_type];
        // 使用安全函数处理URL和属性，确保HTML可正常渲染
        return wp_kses_post( 
            '<img src="' . esc_url($card_logo) . '" alt="' . esc_attr($card_type) . '" style="height:20px; vertical-align:middle;" />' 
        );
    }

    return wp_kses_post($card_type);
}
add_filter('woocommerce_get_credit_card_type_label', 'replace_card_type_with_logo');

补充说明 #

• esc_url()用于过滤图片URL，防止XSS风险；esc_attr()处理alt属性，确保符合HTML规范。
• 可选添加inline样式（如height:20px; vertical-align:middle;），优化Logo与周围文本的排版对齐。
• 若修复后仍无效果，可暂时禁用其他插件或切换至WooCommerce默认主题（Storefront），排查是否存在钩子冲突。

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