添加woocommerce_save_account_details_errors钩子后Ajax表单无法保存数据

你把同一个save_account_details函数同时绑定到了Ajax钩子和woocommerce_save_account_details_errors钩子上，这两个钩子的作用、参数逻辑完全不兼容，直接导致函数执行混乱，数据保存功能失效。以下是针对性的修复方案：

1. 拆分函数，各司其职 #

将Ajax数据保存逻辑和WooCommerce原生错误提示逻辑拆分为两个独立函数，避免冲突。

修改functions.php代码 #

// 处理Ajax方式的账户数据保存
add_action( 'wp_ajax_save_account_details', 'ajax_save_account_details' );
add_action( 'wp_ajax_nopriv_save_account_details', 'ajax_save_account_details' );
function ajax_save_account_details() {
    // 验证用户登录状态
    if ( ! is_user_logged_in() ) {
        wp_send_json_error( '请先登录后操作' );
    }

    $user_id = get_current_user_id();
    $first_name = trim( $_POST['account_first_name'] ?? '' );

    // 字段非空验证
    if ( empty( $first_name ) ) {
        wp_send_json_error( '名字不能为空' );
    }

    // 执行实际的数据保存操作
    wp_update_user( array(
        'ID'         => $user_id,
        'first_name' => $first_name
    ) );

    wp_send_json_success( '设置已保存！' );
}

// 处理WooCommerce原生账户保存流程的错误提示（可选，仅原生表单提交时生效）
add_action( 'woocommerce_save_account_details_errors', 'custom_account_details_errors', 10, 1 );
function custom_account_details_errors( $errors ) {
    $first_name = trim( $_POST['account_first_name'] ?? '' );
    if ( empty( $first_name ) ) {
        $errors->add( 'empty_first_name', '名字不能为空', 'error' );
    }
    return $errors;
}

2. 调整JS代码，适配JSON响应 #

原来的JS直接将返回值插入DOM，现在改为处理标准JSON格式的响应，同时优化请求逻辑：

jQuery(document).ready(function($) {
    $('.mts-edit-account').on('submit', function(e) {
        e.preventDefault();
        const $form = $(this);
        const $noticeWrapper = $('.woocommerce-notices-wrapper');

        $.ajax({
            type: "post",
            data: $form.serialize() + '&action=save_account_details', // 明确指定Ajax动作
            url: wc_params.ajax_url, // 使用WooCommerce内置的Ajax地址，避免硬编码路径问题
            dataType: 'json',
            success: function(response) {
                $noticeWrapper.empty();
                if (response.success) {
                    $noticeWrapper.append('<div class="woocommerce-message" role="alert">' + response.data + '</div>');
                } else {
                    $noticeWrapper.append('<div class="woocommerce-error" role="alert">' + response.data + '</div>');
                }
            },
            error: function() {
                $noticeWrapper.empty().append('<div class="woocommerce-error" role="alert">保存失败，请稍后重试</div>');
            }
        });
    });
});

关键注意点 #

• woocommerce_save_account_details_errors钩子是给WooCommerce原生账户保存流程设计的，它接收WC_Error对象作为参数，需要往该对象中添加错误信息，而非输出JSON，之前共用函数的做法完全违背了这个钩子的设计逻辑。
• 原Ajax函数仅做了非空判断，没有执行实际的用户数据更新操作，补上wp_update_user才能完成数据保存。
• 使用wp_send_json_success和wp_send_json_error可以自动处理JSON格式的响应，比手动json_encode更规范可靠。

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