选中自定义单选按钮时隐藏WooCommerce“配送至其他地址”选项的实现方法

你可以直接在原有自定义字段代码中追加JS监听逻辑实现需求，修改后的完整代码如下：

add_action( 'woocommerce_before_checkout_billing_form', 'display_extra_fields_after_billing_address' , 10, 1 );
function display_extra_fields_after_billing_address () { ?>
    <h3>Do you have a PO box?<sup>*</sup></h3>
    <span><input type="radio" name="delivery_option" value="Yes" required /> Yes </span>
    <span><input type="radio" name="delivery_option" value="No" />No</span>
    <script type="text/javascript">
    jQuery(function($){
        // 监听单选框选择变化
        $('input[name="delivery_option"]').change(function(){
            toggleShipArea($(this).val());
        });
        // 页面加载完成后初始化显示状态
        $(document).ready(function(){
            let checkedVal = $('input[name="delivery_option"]:checked').val();
            if(checkedVal){
                toggleShipArea(checkedVal);
            }
        });
        // 控制配送区域显示状态
        function toggleShipArea(val){
            if(val == 'Yes'){
                $('.ship-to-different-address').hide();
                // 可选：需要同时取消勾选"配送至其他地址可取消下方注释
                // $('#ship-to-different-address-checkbox').prop('checked', false);
            }else{
                $('.ship-to-different-address').show();
            }
        }
    });
    </script>
  <?php 
}

相关说明 #

• WooCommerce默认「配送至其他地址」区块的类名为.ship-to-different-address，常规主题都可以直接适配。如果你自定义过结账页结构导致代码不生效，可以右键审查元素找到对应区块的类名，替换上述代码中的选择器即可。
• 代码已内置页面初始化判断逻辑，即使用户刷新页面、或是之前已经选过选项，也能正确匹配显示对应状态。

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