WooCommerce配送标签不支持HTML渲染，因wp_kses_post()过滤仅保留极少数标签；应使用woocommerce_after_shipping_rate钩子插入HTML，或覆盖模板文件定制。
WooCommerce 默认的配送方式选择是纯文本标签，不支持 HTML 渲染，直接往 $rate->label 里塞 <span></span> 或图标会失效——这是最常踩的坑。
为什么 woocommerce_package_rates 里加 HTML 没用
这个钩子确实能拿到所有配送选项，但 WooCommerce 在最终输出前会对 $rate->label 调用 wp_kses_post() 过滤，只保留白名单内的 HTML 标签（基本只有 <br>、<strong></strong> 等极少数）。你写 $rate->label .= '<small>（次日达）</small>'，前端只会看到“（次日达）”四个纯文字。
- 它设计初衷是处理费率逻辑，不是渲染层
- 任何含
<div>、<code><i></i>、<svg></svg>的尝试都会被清空 - 即使绕过过滤（比如用
wp_unslash()），也容易破坏后续 JS 动态更新逻辑 - 钩子签名是
do_action( 'woocommerce_after_shipping_rate', $package, $rate )，第二个参数就是当前配送项对象 - 你可以安全输出
<div class="shipping-note"> <svg>...</svg> 明日14:00前发货</div> - 配合 CSS 控制显示/隐藏，比如用
[data-index="0"] .shipping-note只对首项生效 - 注意：必须用
add_action()，不能用add_filter()；优先级建议设为10或更高，避免被其他插件覆盖 -
checkout/review-order.php：结算页的配送方式区块 -
cart/cart-shipping.php：购物车页的配送方式区块 - 复制对应文件到你的主题目录：
yourtheme/woocommerce/checkout/review-order.php - 关键点：找到
foreach ( $available_methods as $method )循环，在woocommerce_cart_shipping_method_full_label过滤器调用之后插入你的 HTML
用 woocommerce_after_shipping_rate 插入 HTML 最可靠
这个动作钩子在每个配送选项的 <input type="radio"> 和文本标签之后立即触发，DOM 位置天然适合追加说明性内容，且不经过 label 过滤流程。
模板文件覆盖要改对位置
如果需要更深度定制（比如把单选框换成按钮、加展开详情），就得覆盖 WooCommerce 的模板文件。但别动 cart/shipping-calculator.php——那是地址输入区。真正控制配送列表的是：
立即学习“前端免费学习笔记（深入）”；
移动端和屏幕阅读器要额外留意
加了图标或小字说明后，别只靠视觉区分。比如用 <span aria-hidden="true">?</span> 放图标，再补一句 <span class="screen-reader-text">支持顺丰次日达</span>。否则视障用户听到的可能只是“顺丰速运”，漏掉时效信息。
另外，data-label 属性别乱用——它只在响应式折叠成卡片时起作用，且必须和原始列名严格一致，比如 data-label="运费" 对应表头里的“运费”二字，错一个字，伪元素就标错字段。
