WordPress页面加载执行JS：修复WooCommerce结账字段显示异常

你的代码存在几个核心问题，导致页面加载时输入字段无法默认隐藏：

1. 混淆PHP与JavaScript执行环境：conditionally_hide_show_checkout_field是PHP函数，不能在浏览器端的JavaScript代码中直接调用——PHP运行在服务器端，JS运行在浏览器端，两者完全独立。
2. 缺少初始状态处理：仅绑定了复选框的change事件，但页面加载时没有主动检查复选框状态并调整输入字段的显示。
3. 函数调用语法错误：window.onload中conditionally_hide_show_checkout_field未加括号，且调用对象本身就是错误的PHP函数。

修正方案一（推荐WooCommerce规范写法） #

使用WooCommerce提供的wc_enqueue_js函数，将完整的JavaScript逻辑输出到结账页面，同时包含初始状态处理：

function conditionally_hide_show_checkout_field() {
    wc_enqueue_js( "
        // 定义复用的切换函数
        function toggleGiftMessageField() {
            if ($('#gift_wrap').is(':checked')) {
                $('#personal_message_field').show();
            } else {
                $('#personal_message_field').hide();
            }
        }

        // 页面加载完成后先执行一次，处理初始状态
        toggleGiftMessageField();

        // 绑定复选框的change事件
        $('#gift_wrap').change(toggleGiftMessageField);
    " );
}
// 绑定到WooCommerce结账表单后的钩子，比wp_footer更精准
add_action( 'woocommerce_after_checkout_form', 'conditionally_hide_show_checkout_field' );

修正方案二（直接输出JS到页面底部） #

如果习惯用wp_footer钩子，可直接输出完整的JavaScript逻辑，确保DOM加载完成后执行：

add_action( 'wp_footer', 'on_load_script' );
function on_load_script() {
    ?>
    <script type="text/javascript">
        // 用jQuery的ready确保DOM加载完成后执行
        jQuery(document).ready(function($) {
            function toggleGiftMessageField() {
                if ($('#gift_wrap').is(':checked')) {
                    $('#personal_message_field').show();
                } else {
                    $('#personal_message_field').hide();
                }
            }

            // 初始加载时执行一次
            toggleGiftMessageField();

            // 绑定复选框的change事件
            $('#gift_wrap').on('change', toggleGiftMessageField);
        });
    </script>
    <?php           
}

关键优化点说明 #

• 复用函数：将切换逻辑封装成独立函数，既用于初始状态检查，又用于事件绑定，避免代码重复。
• DOM就绪时机：使用jQuery(document).ready（或WooCommerce的wc_enqueue_js自动处理）确保DOM元素加载完成后再执行JS，避免找不到元素的问题。
• 钩子选择：优先使用woocommerce_after_checkout_form钩子，确保JS代码只在结账页面加载，减少不必要的资源消耗。

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