如何在WooCommerce单品页替换Add to Cart按钮为Elementor弹窗触发按钮？

步骤1：创建Elementor弹窗表单 #

• 进入WordPress后台「Elementor → 模板 → 新建」
• 模板类型选「弹窗」，命名后进入编辑界面
• 拖拽添加「表单」组件，配置好所需字段（比如姓名、邮箱、产品需求等）
• 编辑完成后发布模板，记住弹窗的ID（模板列表里能看到，或者编辑时URL中的post=xxx，xxx就是ID）

步骤2：替换默认Add to Cart按钮 #

新手推荐用「代码片段」插件添加代码（比直接改主题文件更安全，避免出错），先去插件库安装激活该插件。

添加以下代码片段：

// 移除WooCommerce默认的Add to Cart按钮
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);

// 添加自定义弹窗触发按钮
add_action('woocommerce_single_product_summary', 'custom_elementor_popup_trigger_button', 30);
function custom_elementor_popup_trigger_button() {
    // 替换成你的Elementor弹窗模板ID
    $popup_id = 123;
    // 获取当前产品名称（可选，用于按钮文案或弹窗内产品信息）
    $product_name = get_the_title();
    
    // 输出触发按钮，带上Elementor弹窗触发类和ID属性
    echo '<button class="single_add_to_cart_button button alt elementor-popup-trigger" data-elementor-open="' . $popup_id . '">
            咨询产品详情
          </button>';
}

关键说明 #

• 把代码里的123替换成你自己的弹窗模板ID
• single_add_to_cart_button button alt是WooCommerce默认按钮的样式类，加这个能让新按钮和原Add to Cart按钮样式一致
• 按钮文案可以改成你需要的，比如「立即咨询」「申请报价」等
• 如果要在弹窗里显示当前产品信息，可在Elementor表单中添加「隐藏字段」，通过代码传入产品ID/名称（新手可先跳过这一步）

测试效果 #

保存并启用代码片段，打开任意单品页，点击新按钮即可触发Elementor弹窗表单。如果没反应，检查弹窗ID是否正确，或Elementor弹窗「高级」设置里是否开启了「允许触发」。

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