如何通过编程修改WooCommerce自定义复选框勾选时的标签内容

你原有代码的核心问题是：PHP属于服务端渲染语言，仅在页面加载阶段执行，而复选框勾选是客户端浏览器的交互行为，没有页面刷新的场景下服务端PHP代码不会二次运行，自然无法实现实时变更标签的效果，你需要配合JavaScript实现前端交互逻辑。

第一步：优化原有复选框渲染代码 #

替换你原来的字段添加代码如下，移除多余的html/body嵌套，同时给需要动态修改的标签文本增加唯一标识方便JS定位：

add_action('woocommerce_after_checkout_billing_form', 'checkout_shipping_form_packing_addition', 20);
function checkout_shipping_form_packing_addition()
{
    $domain = 'woocommerce';
    echo '<tr class="packing-select"><td>';

    $chosen   = WC()->session->get('chosen_packing');

    // 标签内容增加span包裹方便JS修改
    $label_html = <<<XYZ
 <p style="font-size:15px; margin-top: -38px; margin-left: 5px; height:auto; border:1px; border-style:solid; border-color:#FF0000; padding: 20px;"><b><span id="consegna_rapida_label">Consegna rapida?</span></b></p>
XYZ;
    woocommerce_form_field('chosen_packing', array(
        'type'      => 'checkbox',
        'class'     => array('form-row-wide packing'),
        'label'     => __($label_html, $domain),
        'required'  => false,
    ), $chosen);

    echo '</td></tr>';
}

第二步：添加JS交互代码实现标签动态变更 #

删除你之前写的my_custom_checkout_field_process2相关的无用代码，新增以下代码到主题的functions.php文件中即可：

add_action('wp_footer', 'dynamic_change_packing_checkbox_label');
function dynamic_change_packing_checkbox_label() {
    // 仅在结账页加载这段JS
    if (is_checkout() && !is_wc_endpoint_url()) :
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        // 监听复选框变更事件
        $('input#chosen_packing').change(function(){
            if($(this).is(':checked')){
                // 勾选时修改标签，如需换成"no"直接修改text内的内容即可
                $('#consegna_rapida_label').text('Consegna rapida attiva');
            } else {
                // 取消勾选时恢复原标签
                $('#consegna_rapida_label').text('Consegna rapida?');
            }
        });
    });
    </script>
    <?php
    endif;
}

添加完成后清理网站缓存和浏览器缓存即可生效。

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