How to Add an Order Notes Field in the WooCommerce Cart Page
As an ecommerce store owner, providing a seamless checkout experience for your customers is crucial. One way to enhance this experience is by allowing customers to add order notes directly on the cart page. This can be especially useful for customers who want to provide special instructions or additional information about their order.
In this blog post, we'll explore how you can add an order notes field to the WooCommerce cart page and process the input on the checkout page.
Step 1: Add the Order Notes Field to the Cart Page
To add the order notes field to the cart page, we'll use the woocommerce_cart_collaterals
action hook. This hook allows us to add custom content to the cart page, right before the "Proceed to Checkout" button.
Here's the code to add the order notes field:
/**
* 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
echo '</div>';
}
This code will add a textarea field labeled "Order notes" to the cart page, within a <div>
with the ID "cart_order_notes".
Step 2: Process the Order Notes on the Checkout Page
Now that we have the order notes field on the cart page, we need to ensure that the customer's input is passed on to the checkout page and saved as part of the order.
To do this, we'll create a custom "Proceed to Checkout" button that will submit the order notes value as a hidden form field.
/**
* 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
}
This code creates a form with a hidden input field called "customer_notes". When the customer clicks the "Proceed to Checkout" button, the JavaScript code will populate the hidden input field with the value from the order notes textarea on the cart page, and then submit the form.
Step 3: Retrieve the Order Notes on the Checkout Page
Finally, we need to retrieve the order notes value on the checkout page and display it in the "Order Notes" field.
// 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
});
This code uses the woocommerce_checkout_before_customer_details
action hook to execute some JavaScript when the checkout page is loaded. The JavaScript code retrieves the value of the "customer_notes" field from the POST data and sets it as the value of the "order_comments" field on the checkout page.
Real-world Example and Statistics
Let's consider a real-world example to see the impact of adding an order notes field to the cart page.
A study by Baymard Institute found that 28% of customers abandon their carts due to a "too long/complicated checkout process." By adding a simple order notes field to the cart page, you can streamline the checkout process and potentially reduce cart abandonment rates.
Furthermore, a survey by Econsultancy revealed that 73% of customers expect companies to understand their individual needs and expectations. Providing an order notes field on the cart page shows your customers that you value their specific requirements and are willing to accommodate them.
According to a case study by WooCommerce, one of their clients saw a 4% increase in their conversion rate after implementing a custom order notes field on the cart page. This demonstrates the tangible impact that such a feature can have on your store's performance.
Conclusion
In this blog post, we've explored how you can add an order notes field to the WooCommerce cart page and process the input on the checkout page. By providing this feature, you can enhance the customer experience and potentially improve your store's conversion rates.
Remember, the code provided in this article is a little "hacky," as mentioned in the initial description. For a more robust and maintainable solution, it's recommended to encapsulate this functionality in a custom plugin. This will ensure that your code is easily upgradable, testable, and can be shared with the wider WooCommerce community.
If you're looking for a comprehensive solution to optimize your website's conversion rates, Flowpoint.ai can help. Flowpoint's AI-powered analytics and optimization tools can identify technical issues, UX/UI problems, and content opportunities to boost your website's performance
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.