本教程旨在解决在WooCommerce商店页面上，如何为每个商品添加自定义价格输入框，并将用户输入的自定义价格传递到购物车的问题。通过修改商店页面的“添加到购物车”按钮，将其替换为表单提交按钮，并利用 WooCommerce 提供的钩子函数，实现自定义价格数据的传递和处理，最终成功将自定义价格添加到购物车。
在 WooCommerce 商店页面上添加自定义价格功能，允许用户在将商品添加到购物车之前，输入他们想要支付的价格。这在某些业务场景下非常有用，例如拍卖、议价等。实现此功能的关键在于如何将用户在商店页面输入的自定义价格，正确地传递到购物车并进行处理。由于商店页面的“添加到购物车”按钮通常是一个 href 链接，而不是一个表单提交按钮，因此需要进行一些修改才能实现所需的功能。
步骤 1：将文本框和“添加到购物车”按钮包裹在表单中
首先，需要将自定义价格输入框和“添加到购物车”按钮包裹在一个 zuojiankuohaophpcnform> 标签中。这可以通过 WooCommerce 提供的钩子函数 woocommerce_after_shop_loop_item 来实现。这个钩子函数允许你在商店页面的每个商品循环之后添加自定义内容。
add_action( 'woocommerce_after_shop_loop_item', 'add_custom_price_form', 8 );
function add_custom_price_form() {
global $product;
$product_id = $product->get_id();
?>
<form method="post" id="formID_<?php echo $product_id; ?>">
<label for="custom_price_<?php echo $product_id; ?>">自定义价格：</label>
<input type="number" name="custom_price" id="custom_price_<?php echo $product_id; ?>" step="0.01">
<?php woocommerce_template_loop_add_to_cart(); ?>
</form>
<?php
}代码解释：
- 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。
- <form method="post" id="formID_<?php echo $product_id; ?>">：创建一个表单，method 设置为 post，id 设置为 formID_ 加上商品 ID。
- <input type="number" name="custom_price" id="custom_price_<?php echo $product_id; ?>" step="0.01">：创建一个数字输入框，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 模板文件可能如下所示：
<?php
defined( 'ABSPATH' ) || exit;
global $product;
echo apply_filters( 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok.
sprintf( '<button type="submit" name="add-to-cart" value="%s" class="button alt">%s</button>',
esc_attr( $product->get_id() ),
esc_html( $product->add_to_cart_text() )
),
$product );
?>代码解释：
- 将原来的 <a> 标签替换为 <button type="submit" name="add-to-cart" value="%s" class="button alt">%s</button>。
- 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 提供的钩子函数来处理自定义价格数据。记住，安全性和代码可维护性是至关重要的，务必对用户输入的数据进行安全过滤，并将代码组织良好。
