WooCommerce结账页自定义创建账户复选框关联密码字段问题

我们已将WooCommerce结账页面的账户密码字段从「Account」组移至「Billing」字段组，同时在结算区域添加了一个新的复选框字段（通过jQuery实现），避免默认的「创建账户」复选框停留在原位置。但当前代码实现后，移动后的密码字段始终可见，我们需要实现WooCommerce默认效果：仅当复选框被勾选时才显示密码字段。

修改后的完整代码 #

// 移动账户密码字段到结算区域
function move_password_field($checkout_fields){
    // 将账户密码字段移至结算组
    $checkout_fields['billing']['account_password'] = $checkout_fields['account']['account_password']; 
    // 给密码字段添加自定义类，方便后续控制显示
    $checkout_fields['billing']['account_password']['class'] = array('form-row-wide', 'account-password-field');

    // 从原账户组移除密码字段
    unset($checkout_fields['account']['account_password']);

    return $checkout_fields;
}
add_filter('woocommerce_checkout_fields', 'move_password_field', 999); 

// CSS样式规则
add_action( 'woocommerce_before_checkout_billing_form', 'move_checkout_create_an_account_css' );
function move_checkout_create_an_account_css() {
    if( ! is_user_logged_in() ) :
    ?><style>
        .woocommerce-account-fields label.woocommerce-form__label-for-checkbox {display: none !important;}
        #account_cb_field {margin-top: 32px;}
        #account_cb_field input {margin-right: 6px;}
        /* 默认隐藏密码字段 */
        .account-password-field { display: none; }
    </style>
    <?php
    endif;
}

// 在结算区域添加自定义复选框
add_filter( 'woocommerce_checkout_fields', 'move_checkout_create_an_account_checkbox' );
function move_checkout_create_an_account_checkbox( $fields ) {
    if( ! is_user_logged_in() ) {
        // 设置邮箱字段为宽行
        $fields['billing']['billing_email']['class'] = array('form-row-wide');

        // 添加自定义创建账户复选框
        $fields['billing']['account_cb'] = array(
            'type'  => 'checkbox',
            'label' => __("创建账户?", "woocommerce"),
            'class' => array('form-row-wide'),
        );
    }
    return $fields;
}

// 移除自定义复选框的「(可选)」标签
add_filter( 'woocommerce_form_field' , 'remove_checkout_optional_fields_label', 10, 4 );
function remove_checkout_optional_fields_label( $field, $key, $args, $value ) {
    // 仅在结账页面生效
    if ( is_checkout() && ! is_wc_endpoint_url() && $key === 'account_cb' ) {
        $optional = '&nbsp;<span class="optional">(' . esc_html__( '可选', 'woocommerce' ) . ')</span>';
        $field = str_replace( $optional, '', $field );
    }
    return $field;
}

// jQuery交互逻辑
add_action( 'wp_footer', 'move_checkout_create_an_account_js' );
function move_checkout_create_an_account_js() {
    if ( ! is_user_logged_in() && is_checkout() && ! is_wc_endpoint_url() ) :
    ?><script>
    (function($){
        // 页面加载时同步状态：如果默认创建账户复选框已勾选，同步自定义复选框和密码字段显示
        var defaultCheckbox = $('input[name=createaccount]');
        var customCheckbox = $('input[name=account_cb]');
        var passwordField = $('.account-password-field');

        if(defaultCheckbox.is(':checked')){
            customCheckbox.prop('checked', true);
            passwordField.show();
        }

        // 自定义复选框点击事件
        customCheckbox.on( 'click', function() {
            var isChecked = $(this).is(':checked');
            // 同步默认复选框状态（保证后台逻辑正常）
            defaultCheckbox.prop('checked', isChecked).trigger('change');
            // 控制密码字段显示/隐藏
            passwordField.toggle(isChecked);
        });

        // 监听默认复选框的变化，避免其他逻辑修改它时出现状态不一致
        defaultCheckbox.on('change', function(){
            var isChecked = $(this).is(':checked');
            customCheckbox.prop('checked', isChecked);
            passwordField.toggle(isChecked);
        });
    })(jQuery);
    </script>
    <?php
    endif;
}

关键改动说明 #

• 密码字段添加自定义类：在move_password_field函数中，给移动后的密码字段新增account-password-field类，方便通过CSS和JS精准控制显示状态，同时保留form-row-wide保证布局一致性。
• 默认隐藏密码字段：通过CSS设置密码字段初始状态为隐藏，贴合WooCommerce默认交互逻辑。
• 完善JS同步逻辑：
  1. 页面加载时同步默认复选框与自定义复选框的状态，避免初始显示异常；
  2. 点击自定义复选框时，同步默认复选框状态（确保后台创建账户的逻辑正常执行），同时切换密码字段的显示/隐藏；
  3. 监听默认复选框的变化，防止其他插件或逻辑修改它时出现状态不一致的问题。
• 适配中文语境：将复选框标签和「可选」文本调整为中文，符合国内使用场景。

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