如何将WooCommerce结账登录表单移至订单审核后并修复异常？

直接移除默认动作再添加到新位置会导致WooCommerce原生JS事件绑定失效，同时表单展开状态逻辑不适配新位置，以下是修复方案：

替换原有代码 #

把你之前的代码替换成下面这段：

// 移除默认位置的结账登录表单
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );

// 在订单审核区域后添加自定义处理的登录表单
add_action( 'woocommerce_checkout_after_order_review', 'custom_checkout_login_form', 10 );

function custom_checkout_login_form() {
    // 输出WooCommerce默认的登录表单HTML结构
    woocommerce_checkout_login_form();
    
    // 重新初始化登录表单的交互逻辑
    ?>
    <script type="text/javascript">
        (function($) {
            // 初始状态隐藏登录表单，解决自动展开问题
            $('.woocommerce-form-login').hide();
            
            // 重新绑定登录按钮的点击切换事件
            $('.showlogin').on('click', function(e) {
                e.preventDefault();
                $('.woocommerce-form-login').toggle();
            });
        })(jQuery);
    </script>
    <?php
}

方案说明 #

• 自定义函数先调用官方表单输出方法，保证HTML结构与默认一致
• 手动设置表单初始为隐藏状态，修复自动展开的问题
• 重新绑定按钮点击事件，恢复原生的展开/折叠交互

额外注意 #

• 如果你的主题重写了woocommerce_checkout_login_form模板，需要根据实际HTML结构调整JS里的选择器（比如类名）
• 修改后务必清除浏览器缓存、WooCommerce缓存及CDN缓存，确保新代码生效

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