如何为WooCommerce购物车、结账页的配送方式标签添加自定义HTML？

问题原因 #

WooCommerce在前端渲染配送方式标签时，默认会对woocommerce_package_rates中设置的label属性执行esc_html()转义处理，所有HTML标签都会被转义为纯文本，因此直接在label中拼接HTML不会生效。 #

可行解决方案 #

建议通过woocommerce_cart_shipping_method_full_label过滤器处理最终输出的标签，该过滤器的输出不会被自动转义，可以正常解析HTML内容，完整实现逻辑如下：

// 第一步：将预计送达时间存入配送方式的元数据
add_filter( 'woocommerce_package_rates','add_estimated_arrival_meta', 50, 2 );
function add_estimated_arrival_meta($rates, $package){
    $groundStuff = $timeReturnedFromAPI; // 这里保留你原有的UPS API获取时间逻辑
    $ground_rate_id = 'ups:6:09'; // UPS ground rate ID
    
    foreach ( $rates as $rate_key => $rate ) {
        if( $ground_rate_id === $rate_key ) {
            // 不直接修改label，把时间存入元数据
            $rates[$rate_key]->add_meta_data( 'estimated_arrival', $groundStuff );
            break;
        }
    }
    return $rates;
}

// 第二步：在标签渲染时输出带HTML的预计送达时间
add_filter( 'woocommerce_cart_shipping_method_full_label', 'add_estimated_arrival_html', 10, 2 );
function add_estimated_arrival_html( $label, $method ) {
    $arrival_time = $method->get_meta( 'estimated_arrival' );
    if ( $arrival_time ) {
        // 这里可以自定义HTML结构和样式
        $label .= ' <span class="estimated-arrival-time" style="font-size: 12px; font-weight: normal;">(' . esc_html( $arrival_time ) . ')</span>';
    }
    return $label;
}

注意事项 #

• 测试时需要清空WooCommerce配送缓存：可以通过清空购物车、或者在WooCommerce设置 > 配送 > 配送选项中点击清空缓存，避免旧的费率缓存影响效果
• 建议把行内样式替换为自定义class统一管理：你可以在主题自定义CSS中添加如下样式，后续调整无需修改PHP代码

.estimated-arrival-time {
    font-size: 12px;
    font-weight: normal;
    margin-left: 6px;
}

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