Sometimes, customers have special requests or things they really want to tell the seller. Like, imagine customers are on the lookout to buy a backpack for a big travel adventure. They would’ve got the basic details in the product description, but they also might want to add some extra details or ask for something specific. This WooCommerce customization helps customers in such scenarios! They can leave a little note for each item in your order, making sure everything is exactly how they want it when it arrives.
Solution: Add Customer Order Notes Field on WooCommerce Product Pages
The code adds a custom product note field to WooCommerce single product pages and the customer’s note is displayed in the order items table.
// Add a custom product note below product meta in single product pages add_action('woocommerce_single_product_summary', 'custom_product_note', 100 ); function custom_product_note() { echo '<br><div>'; woocommerce_form_field('customer_note', array( 'type' => 'textarea', 'class' => array( 'my-field-class form-row-wide') , 'label' => __('Product note') , 'placeholder' => __('Add your note here, please…') , 'required' => false, ) , ''); echo '</div>'; // ?> <script type="text/javascript"> jQuery( function($){ $('#customer_note').on( 'input blur', function() { $('#product_note').val($(this).val()); }); }); </script> <?php } // Custom hidden field in add to cart form add_action( 'woocommerce_before_add_to_cart_button', 'hidden_field_before_add_to_cart_button', 5 ); function hidden_field_before_add_to_cart_button(){ echo '<input type="hidden" name="product_note" id="product_note" value="">'; } // Add customer note to cart item data add_filter( 'woocommerce_add_cart_item_data', 'add_product_note_to_cart_item_data', 20, 2 ); function add_product_note_to_cart_item_data( $cart_item_data, $product_id ){ if( isset($_POST['product_note']) && ! empty($_POST['product_note']) ){ $product_note = sanitize_textarea_field( $_POST['product_note'] ); $cart_item_data['product_note'] = $product_note; } return $cart_item_data; } // Save customer note with order item meta add_action( 'woocommerce_checkout_create_order_line_item', 'ts_save_customer_note_as_order_item_meta', 10, 4 ); function ts_save_customer_note_as_order_item_meta( $item, $cart_item_key, $values, $order ) { if ( isset( $values['product_note'] ) ) { $item->add_meta_data( 'Customer Note', $values['product_note'], true ); } } // Display customer note in the order items table add_filter( 'woocommerce_before_order_itemmeta', 'ts_display_customer_note_in_order_items_table', 10, 3 ); function ts_display_customer_note_in_order_items_table( $item_output, $item, $args ) { if ( $note = $item->get_meta( 'Customer Note', true ) ) { $item_output .= '<br><small>' . __( 'Customer Note:', 'your-text-domain' ) . ' ' . esc_html( $note ) . '</small>'; } return $item_output; }
Output
With the custom order notes displayed in the product page, customers can enter their additional instructions that they wish to convey to the store owner.
![How to Add Customer Order Notes Field on WooCommerce Product Pages? 1 How to Add Customer Order Notes Field on WooCommerce Product Pages? - Tyche Softwares](https://media.tychesoftwares.com/wp-content/uploads/custom-order-notes-field-in-product-page-1024x776.png)
The customer entered message can aslo be viewed by the admin in the admin order items table.
![How to Add Customer Order Notes Field on WooCommerce Product Pages? 2 How to Add Customer Order Notes Field on WooCommerce Product Pages? - Tyche Softwares](https://media.tychesoftwares.com/wp-content/uploads/Customer-entered-order-notes-in-product-page-1024x408.png)
To wrap things up, we have added a text area field type to let customers enter their order notes. Likewise, you can also incorporate phone number and email fields on the product page. By integrating such fields, you can gather customer details, which is very useful for personalized marketing and enhancing customer service.
Where would you paste that code?
Hi Kieran,
You should add the code snippets to the functions.php file of your child theme. You can find it by going to Appearance -> Theme File Editor -> and then locating the functions.php file for your child theme in the right sidebar. If you’re looking for an easier option, consider installing the Code Snippets plugin, which lets you add code snippets directly through the plugin interface. Feel free to reach out if you have any questions or need further clarification.
THANK YOU!
Can I ask you one more question? How would I move the notes box to below the variation choices instead of below the share buttons.
https://themadstatist.com/shop/uni/cc/tyranny-taxes-cc/
Hi Kieran,
To move the notes box above the “Add to Cart” button, use a different hook to position the notes box field correctly. In the code, you can change the hook from woocommerce_single_product_summary to woocommerce_before_add_to_cart_button.