本教程旨在解决在WooCommerce商店页面上，如何为每个商品添加自定义价格输入框，并将用户输入的自定义价格传递到购物车的问题。通过修改商店页面的“添加到购物车”按钮，将其替换为表单提交按钮，并利用 WooCommerce 提供的钩子函数，实现自定义价格数据的传递和处理，最终成功将自定义价格添加到购物车。
在 WooCommerce 商店页面上添加自定义价格功能，允许用户在将商品添加到购物车之前，输入他们想要支付的价格。这在某些业务场景下非常有用，例如拍卖、议价等。实现此功能的关键在于如何将用户在商店页面输入的自定义价格，正确地传递到购物车并进行处理。由于商店页面的“添加到购物车”按钮通常是一个 href 链接，而不是一个表单提交按钮，因此需要进行一些修改才能实现所需的功能。
步骤 1：将文本框和“添加到购物车”按钮包裹在表单中
首先，需要将自定义价格输入框和“添加到购物车”按钮包裹在一个
代码解释：
- add_action( 'woocommerce_after_shop_loop_item', 'add_custom_price_form', 8 );：将 add_custom_price_form 函数挂载到 woocommerce_after_shop_loop_item 钩子上，优先级为 8。确保在 WooCommerce 默认的“添加到购物车”按钮之前或之后执行。
- global $product;：获取当前商品对象。
- $product_id = $product->get_id();：获取当前商品的 ID，用于生成唯一的表单 ID 和输入框 ID。
- ：创建一个数字输入框，name 设置为 custom_price，id 设置为 custom_price_ 加上商品 ID，step 设置为 0.01，允许输入小数。
- php woocommerce_template_loop_add_to_cart(); ?>：调用 WooCommerce 默认的“添加到购物车”按钮模板。
注意事项：
- 务必为每个表单添加一个唯一的 id 属性，方便后续使用 jQuery 进行操作。
- 优先级 8 的选择需要根据实际情况调整，确保表单在正确的位置渲染。
步骤 2：修改 "add-to-cart.php" 模板
接下来，需要修改 WooCommerce 的 add-to-cart.php 模板文件，将其中的 href 链接替换为一个 submit 按钮。为了避免直接修改 WooCommerce 核心文件，建议将 add-to-cart.php 文件复制到你的主题目录下，并进行修改。
通常，add-to-cart.php 文件位于 woocommerce/templates/loop/add-to-cart.php。将其复制到 your-theme/woocommerce/loop/add-to-cart.php。
修改后的 add-to-cart.php 模板文件可能如下所示：
%s',
esc_attr( $product->get_id() ),
esc_html( $product->add_to_cart_text() )
),
$product );
?>代码解释：
- 将原来的 标签替换为 。
- type="submit"：指定按钮类型为提交按钮。
- name="add-to-cart"：指定按钮的名称为 add-to-cart，这是 WooCommerce 识别的购物车参数。
- value="%s"：将商品 ID 作为按钮的值传递。
- class="button alt"：保留 WooCommerce 默认的按钮样式。
步骤 3：使用 jQuery 更新表单的 action 属性
由于 add-to-cart.php 模板现在生成的是一个提交按钮，我们需要使用 jQuery 来更新表单的 action 属性，使其指向正确的“添加到购物车” URL。
将以下代码添加到你的主题的 JavaScript 文件中（例如 functions.php 或一个单独的 JavaScript 文件）：
jQuery(document).ready(function($) {
$('form[id^="formID_"]').each(function() {
var product_id = $(this).attr('id').replace('formID_', '');
$(this).attr('action', '?add-to-cart=' + product_id);
});
});代码解释：
- jQuery(document).ready(function($) { ... });：确保在文档加载完成后执行代码。
- $('form[id^="formID_"]').each(function() { ... });：选择所有 id 以 formID_ 开头的表单，并遍历它们。
- var product_id = $(this).attr('id').replace('formID_', '');：从表单的 id 属性中提取商品 ID。
- $(this).attr('action', '?add-to-cart=' + product_id);：将表单的 action 属性设置为 ?add-to-cart= 加上商品 ID。
步骤 4：处理自定义价格数据
最后，需要使用 WooCommerce 提供的 woocommerce_add_cart_item_data 钩子函数来处理自定义价格数据，并将其保存到购物车中。
add_filter( 'woocommerce_add_cart_item_data', 'add_custom_price_to_cart', 10, 3 );
function add_custom_price_to_cart( $cart_item_data, $product_id, $variation_id ) {
if ( isset( $_POST['custom_price'] ) && ! empty( $_POST['custom_price'] ) ) {
$custom_price = sanitize_text_field( $_POST['custom_price'] );
$cart_item_data['custom_price'] = $custom_price;
// 强制设置产品价格
add_filter( 'woocommerce_cart_item_price', 'wdm_custom_price', 10, 3 );
}
return $cart_item_data;
}
function wdm_custom_price( $price, $cart_item, $cart_item_key ) {
if( isset( $cart_item['custom_price'] ) ) {
$price = wc_price( $cart_item['custom_price'] );
}
return $price;
}代码解释：
- add_filter( 'woocommerce_add_cart_item_data', 'add_custom_price_to_cart', 10, 3 );：将 add_custom_price_to_cart 函数挂载到 woocommerce_add_cart_item_data 钩子上，优先级为 10，接受 3 个参数。
- if ( isset( $_POST['custom_price'] ) && ! empty( $_POST['custom_price'] ) ) { ... }：检查 $_POST 中是否存在 custom_price 字段，并且不为空。
- $custom_price = sanitize_text_field( $_POST['custom_price'] );：对 $_POST['custom_price'] 进行安全过滤。
- $cart_item_data['custom_price'] = $custom_price;：将自定义价格保存到 $cart_item_data 数组中。
- add_filter( 'woocommerce_cart_item_price', 'wdm_custom_price', 10, 3 );：挂载钩子强制修改产品价格。
- wc_price( $cart_item['custom_price'] )：使用woocommerce函数显示价格。
注意事项：
- 务必对用户输入的数据进行安全过滤，防止 XSS 攻击。
- woocommerce_add_cart_item_data 钩子函数允许你修改购物车商品的数据，例如添加自定义字段。
总结
通过以上步骤，你就可以在 WooCommerce 商店页面上添加自定义价格功能，并将用户输入的自定义价格传递到购物车中。这个方法的核心在于将商店页面的“添加到购物车”按钮替换为表单提交按钮，并利用 WooCommerce 提供的钩子函数来处理自定义价格数据。记住，安全性和代码可维护性是至关重要的，务必对用户输入的数据进行安全过滤，并将代码组织良好。
