将默认WooCommerce登录注册页面替换为自定义Elementor页面

方法1：用钩子替换默认表单内容 #

直接在WooCommerce默认的登录/注册显示位置，替换为Elementor制作的表单模板：

• 先在Elementor中将登录、注册表单分别保存为模板（模板→保存模板），记下模板ID（可在模板编辑页面的URL中找到，比如post=123里的123）。
• 在主题的functions.php文件或自定义插件中添加以下代码：

替换登录表单 #

add_action('woocommerce_login_form', 'replace_woocommerce_login_form', 1);
function replace_woocommerce_login_form() {
    // 移除WooCommerce默认登录表单
    remove_action('woocommerce_login_form', 'woocommerce_login_form');
    // 输出Elementor登录模板，替换ID为你的模板ID
    echo do_shortcode('[elementor-template id="123"]');
}

替换注册表单 #

add_action('woocommerce_register_form', 'replace_woocommerce_register_form', 1);
function replace_woocommerce_register_form() {
    remove_action('woocommerce_register_form', 'woocommerce_register_form');
    echo do_shortcode('[elementor-template id="456"]');
}

方法2：修改WooCommerce的登录跳转目标 #

让用户点击订单、心愿单等需要登录的端点时，直接跳转到Elementor制作的登录页面，而非默认的My Account页面：

// 替换WooCommerce默认登录URL为Elementor页面
add_filter('woocommerce_get_login_url', 'custom_woocommerce_login_url');
function custom_woocommerce_login_url($default_url) {
    // 替换为你的Elementor登录页面ID
    return get_permalink(789);
}

// 登录后跳转到用户原本想访问的页面
add_filter('woocommerce_login_redirect', 'custom_login_redirect', 10, 2);
function custom_login_redirect($redirect, $user) {
    $redirect_to = isset($_REQUEST['redirect_to']) ? $_REQUEST['redirect_to'] : get_permalink(get_option('woocommerce_myaccount_page_id'));
    return $redirect_to;
}

方法3：处理Elementor表单的登录/注册逻辑 #

确保Elementor表单能实现实际的登录、注册功能，需添加表单提交的处理代码：

处理登录表单提交 #

add_action('elementor_pro/forms/new_record', 'handle_elementor_login_submit', 10, 2);
function handle_elementor_login_submit($record, $handler) {
    // 替换为你的Elementor登录表单名称
    if ($record->get_form_settings('form_name') !== '用户登录') {
        return;
    }

    $fields = $record->get_fields();
    // 替换为你表单中对应的字段键名（Elementor表单里设置的字段ID）
    $username = $fields['login_username']['value'];
    $password = $fields['login_password']['value'];

    $user = wp_signon([
        'user_login'    => $username,
        'user_password' => $password,
        'remember'      => isset($fields['login_remember']) ? true : false
    ], false);

    if (is_wp_error($user)) {
        $handler->add_error_message($user->get_error_message());
    } else {
        $redirect_to = isset($_POST['redirect_to']) ? $_POST['redirect_to'] : get_permalink(get_option('woocommerce_myaccount_page_id'));
        $handler->add_response_data('redirect_url', $redirect_to);
    }
}

处理注册表单提交 #

add_action('elementor_pro/forms/new_record', 'handle_elementor_register_submit', 10, 2);
function handle_elementor_register_submit($record, $handler) {
    if ($record->get_form_settings('form_name') !== '用户注册') {
        return;
    }

    $fields = $record->get_fields();
    $username = $fields['register_username']['value'];
    $email = $fields['register_email']['value'];
    $password = $fields['register_password']['value'];

    $user_id = wp_create_user($username, $password, $email);

    if (is_wp_error($user_id)) {
        $handler->add_error_message($user_id->get_error_message());
    } else {
        // 注册后自动登录
        wp_set_current_user($user_id);
        wp_set_auth_cookie($user_id);
        $redirect_to = get_permalink(get_option('woocommerce_myaccount_page_id'));
        $handler->add_response_data('redirect_url', $redirect_to);
    }
}

注意事项 #

• 代码中的模板ID、页面ID、表单名称、字段键名需根据自己的实际配置修改。
• 建议使用自定义插件添加代码，避免主题更新导致代码丢失。
• 若使用Elementor Pro表单，需将表单提交动作设置为自定义动作，确保上述钩子能正常触发。

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