如何通过Hooks在WooCommerce结账页标签旁添加带Tooltip的图标？

一、修正woocommerce_form_field过滤器实现 #

你之前的问题大概率是过滤器里的输出逻辑没针对特定字段的标签位置处理，导致图标跑到了错误区域。可以通过精准匹配billing_phone字段，把图标插入到标签的闭合位置，确保和标签在同一行：

add_filter( 'woocommerce_form_field', 'add_phone_tooltip_to_billing_field', 10, 4 );
function add_phone_tooltip_to_billing_field( $field, $key, $args, $value ) {
    // 仅针对billing_phone字段生效
    if ( 'billing_phone' === $key ) {
        // 替换成你自己的Tooltip HTML结构（匹配后台样式）
        $tooltip_html = '<span class="tooltip-icon" title="请输入有效手机号，我们将发送订单确认通知">ℹ️</span>';
        
        // 把图标插入到标签末尾，避免错位
        $field = str_replace( '</label>', $tooltip_html . '</label>', $field );
    }
    
    return $field;
}

搭配对应CSS（模拟WP后台Tooltip效果）：

.tooltip-icon {
    margin-left: 4px;
    cursor: help;
    color: #2271b1;
    position: relative;
}

.tooltip-icon:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 13px;
    white-space: nowrap;
    z-index: 9999;
}

.tooltip-icon:hover::before {
    content: '';
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #222;
}

二、更精准的针对性过滤器方案 #

如果担心全局过滤器影响其他字段，可以用woocommerce_form_field_{$type}的细分过滤器，billing_phone默认是tel类型，所以代码如下：

add_filter( 'woocommerce_form_field_tel', 'add_tooltip_to_billing_phone_field', 10, 4 );
function add_tooltip_to_billing_phone_field( $field, $key, $args, $value ) {
    if ( 'billing_phone' === $key ) {
        $tooltip_html = '<span class="tooltip-icon" title="请输入有效手机号，我们将发送订单确认通知">ℹ️</span>';
        $field = str_replace( '</label>', $tooltip_html . '</label>', $field );
    }
    return $field;
}

三、Hooks无法满足时的模板自定义方案 #

如果上述方法都不生效，直接修改结账页的账单字段模板：

1. 找到WooCommerce插件目录下的 templates/checkout/form-billing.php 文件
2. 复制该文件到你的主题目录下的 woocommerce/checkout/ 文件夹（保持路径结构，避免插件更新覆盖修改）
3. 在复制后的文件中找到billing_phone字段的代码块，修改label参数，直接把图标嵌入标签文本：

woocommerce_form_field( 'billing_phone', array(
    'type'        => 'tel',
    'label'       => __( 'Phone', 'woocommerce' ) . '<span class="tooltip-icon" title="你的Tooltip文本">ℹ️</span>',
    'required'    => true,
    'class'       => array( 'form-row-wide' ),
    'clear'       => true,
), $checkout->get_value( 'billing_phone' ) );

4. 同样添加之前的CSS样式到主题自定义CSS面板或style.css文件中。

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