从按钮到表单：如何在Elementor产品卡片中实现弹窗询盘并自动带入产品信息

在做 WordPress 外贸商城项目时，我们常常会遇到这样的需求：

“客户浏览产品列表时，可以快速点击一个按钮，打开弹窗进行询价，并自动携带当前产品的名称等信息提交。”

传统的做法，往往是在产品详情页设置表单，但对于想提升转化率的电商网站来说，这种做法过于冗长，不够快捷。

最近我们在使用 Elementor + WooCommerce + Woodmart 主题做一个项目时，就遇到了这个问题，并顺利完成了一个非常优雅的解决方案，本文将完整记录这个过程。

🚀 项目背景

客户希望在产品列表中，每个产品都能有一个“ask for discount”按钮：

点击后弹出一个 Elementor 的弹窗；
弹窗中自动填入当前产品的名称；
用户填写邮箱、留言后提交即可完成询盘。

看似简单，实则涉及多个组件协同：WooCommerce 模板、Elementor 弹窗、动态表单字段、JavaScript 数据传递。

🎯 目标需求总结

产品循环中每个产品按钮都可打开同一个弹窗；
点击哪个产品的按钮，就将该产品的名称传入表单；
表单通过 Elementor 提交，发送到邮箱或 CRM。

🧩 第一步：在 WooCommerce 模板中添加带数据的按钮

我们重写了 add-to-cart.php 模板，在每个产品项中加入询盘按钮，并通过 data-* 属性附加当前产品的信息：

<div class="hzt-inquiry">
	<a href="javascript:void(0)"
	   class="hzt-inquiry-btn"
	   data-product_name="<?php echo esc_attr( $product->get_name() ); ?>"
	   data-product_id="<?php echo esc_attr( $product->get_id() ); ?>"
	   data-product_url="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>">
	   Ask for More Discount
	</a>
</div>

🛠 第二步：设置 Elementor 弹窗

使用 Elementor Pro 创建一个弹窗：

在弹窗高级设置中，开启 “Open By Selector”；
设置为 .hzt-inquiry-btn，即上方按钮的 class；
弹窗中添加一个表单，并设置如下隐藏字段：

字段 ID	类型	是否隐藏
`product_name`	隐藏字段	✅ 是
`product_id`	隐藏字段	✅ 是
`product_url`	隐藏字段	✅ 是

💡 第三步：JavaScript 实现字段填充逻辑

由于弹窗内容是动态插入的，我们使用 JavaScript 做两件事：

点击按钮时记录产品信息；
弹窗打开后延迟填入隐藏字段。

完整的 JS 代码如下：

jQuery(function($) {
	let lastProductData = {}

	$(document).on('click', '.hzt-inquiry-btn', function(e) {
		e.preventDefault();
		lastProductData = {
			name: $(this).data('product_name'),
			id: $(this).data('product_id'),
			url: $(this).data('product_url')
		};
	});

	$(document).on('elementor/popup/show', function(event, id, instance) {
		setTimeout(function() {
			if (
				$('#form-field-product_name').length &&
				$('#form-field-product_id').length &&
				$('#form-field-product_url').length
			) {
				$('#form-field-product_name').val(lastProductData.name);
				$('#form-field-product_id').val(lastProductData.id);
				$('#form-field-product_url').val(lastProductData.url);
			}
		}, 300);
	});
});