本教程旨在解决在WooCommerce商店页面上，如何为每个商品添加自定义价格输入框，并将用户输入的自定义价格传递到购物车的问题。通过修改商店页面的“添加到购物车”按钮，将其替换为表单提交按钮，并利用 WooCommerce 提供的钩子函数，实现自定义价格数据的传递和处理，最终成功将自定义价格添加到购物车。
在 WooCommerce 商店页面上添加自定义价格功能，允许用户在将商品添加到购物车之前，输入他们想要支付的价格。这在某些业务场景下非常有用，例如拍卖、议价等。实现此功能的关键在于如何将用户在商店页面输入的自定义价格，正确地传递到购物车并进行处理。由于商店页面的“添加到购物车”按钮通常是一个 href 链接，而不是一个表单提交按钮，因此需要进行一些修改才能实现所需的功能。
步骤 1：将文本框和“添加到购物车”按钮包裹在表单中
首先，需要将自定义价格输入框和“添加到购物车”按钮包裹在一个
<input type="number" name="custom_price" id="custom_price_” 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 模板文件可能如下所示：
<?phpdefined( 'ABSPATH' ) || exit;global $product;echo apply_filters( 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok. sprintf( '', 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 提供的钩子函数来处理自定义价格数据。记住，安全性和代码可维护性是至关重要的，务必对用户输入的数据进行安全过滤，并将代码组织良好。
以上就是WooCommerce商店页面：通过“添加到购物车”按钮添加自定义价格教程的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1323194.html
微信扫一扫 
支付宝扫一扫 
