如何在 Woocommerce 购物车页面中添加订单备注字段？

Posted 2023-03-06

【中文标题】如何在 Woocommerce 购物车页面中添加订单备注字段？

【英文标题】：How to add an order notes field in Woocommerce cart page?

【发布时间】：2018-08-09 19:59:35

【问题描述】：

我想在 Woocommerce 购物车优惠券区域下的 Woocommerce 购物车页面中添加备注字段。此字段应类似于 Woocommerce 结帐页面“订单备注”字段，客户可以在其中添加一些备注。

到目前为止，我有这段代码表明我想要的位置：

add_action ('woocommerce_after_cart_table','add_content_below_cart_coupon');
function add_content_below_cart_coupon () 
echo 'this will show below the cart cuopon';

如何在此区域添加备注字段，以便这些客户备注也将显示在结帐页面的订单详细信息中？

谢谢！

【问题讨论】：

这不起作用，因为当点击结帐时，购物车页面上没有提交任何数据......

他使用一些 javascript 解决了这个问题，并且像一个魅力一样工作。

【参考方案1】：

我解决了这个问题，但有点hacky，我建议把它放在一个插件中

/**
 * Add the order_comments field to the cart
 **/
add_action('woocommerce_cart_collaterals', 'order_comments_custom_cart_field');

function order_comments_custom_cart_field() 
    echo '<div id="cart_order_notes">';

?>
<div class="customer_notes_on_cart">
<label for="customer_notes_text"><?php _e('Order notes','woocommerce'); ?></label>
<textarea id="customer_notes_text"></textarea>
</div>
<?php





/**
 * Process the checkout and overwriting the normal button
 *
 */
function woocommerce_button_proceed_to_checkout() 
    $checkout_url = wc_get_checkout_url();
    ?>
       <form id="checkout_form" method="POST" action="<?php echo $checkout_url; ?>">
       <input type="hidden" name="customer_notes" id="customer_notes" value="">
       <a  href="#" onclick="document.getElementById('customer_notes').value=document.getElementById('customer_notes_text').value;document.getElementById('checkout_form').submit()" class="checkout-button button alt wc-forward">
       <?php _e( 'Proceed to checkout', 'woocommerce' ); ?></a>
       </form>
       <?php
     


// getting the values in checkout again
add_action('woocommerce_checkout_before_customer_details',function()
?>
<script>
jQuery( document ).ready(function() 
    jQuery('#order_comments' ).val("<?php echo sanitize_text_field($_POST['customer_notes']); ?>");
);
</script>

<?php 

);

【讨论】：

太棒了！我使用 woocommerce_cart_actions 钩子将其放置在订单行之后。