How to Add Customer Order Notes Field on WooCommerce Product Pages?

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.

The customer entered message can aslo be viewed by the admin in the admin order items table.

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.