如何在WooCommerce我的账户页面替换默认登录/注册表单为Elementor自定义表单

方法1：使用Elementor Pro的WooCommerce集成功能 #

如果你使用的是Elementor Pro版本，可直接通过自带功能替换：

• 进入WordPress后台，打开「页面」找到「我的账户」页面，点击「用Elementor编辑」
• 在Elementor编辑器中，删除默认的WooCommerce「我的账户」小部件
• 拖拽Elementor的「表单」小部件到页面，配置登录/注册所需字段（可通过Elementor的条件显示功能，区分登录/未登录状态下显示不同表单）
• 保存页面后，前端访问「我的账户」页即可看到自定义表单

方法2：代码移除默认表单并嵌入Elementor模板（免费版适用） #

步骤1：移除WooCommerce默认表单 #

在主题或子主题的functions.php文件中添加以下代码，移除默认的登录/注册表单：

add_action( 'woocommerce_before_my_account', 'remove_default_woocommerce_auth_form' );
function remove_default_woocommerce_auth_form() {
    // 移除默认登录表单
    remove_action( 'woocommerce_account_login_form', 'woocommerce_account_login_form' );
    // 移除默认注册表单
    remove_action( 'woocommerce_account_register_form', 'woocommerce_account_register_form' );
}

步骤2：嵌入自定义Elementor模板 #

• 先将你制作好的Elementor登录/注册页面保存为模板：打开Elementor编辑器，点击左下角「保存模板」，命名完成后保存
• 在functions.php中添加代码，将模板嵌入「我的账户」页面：

add_action( 'woocommerce_before_my_account', 'load_elementor_custom_auth_template' );
function load_elementor_custom_auth_template() {
    // 替换为你的模板ID（在Elementor模板库中编辑模板时，地址栏post=后的数字即为ID）
    echo do_shortcode( '[elementor-template id="123"]' );
}

方法3：条件显示实现表单切换（无需改代码） #

如果你不想修改代码，可借助Elementor Pro的条件显示功能：

• 打开「我的账户」页面的Elementor编辑器，保留默认的WooCommerce账户结构
• 在页面顶部添加你的自定义登录/注册表单
• 给默认WooCommerce表单设置条件显示：仅当用户已登录时显示
• 给自定义表单设置条件显示：仅当用户未登录时显示
• 保存后，未登录用户访问「我的账户」页将看到自定义表单，已登录用户则显示正常账户内容

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