How To Allow Customers To Add Order Notes For Each Product In WooCommerce?

Share on facebook
Share on linkedin
Share on twitter

The default WooCommerce product page is quite helpful for selling any type of product. But it doesn’t allow customers to add a note for each product. 

Although WooCommerce allows them to add order notes on the checkout page, your customers might want to add them on a per product basis.

You may sell products made to order, and users want them completely customized. In that case, they’ll need to write all the instructions and notes while checking out, and it can be frustrating for them if they can’t add notes for each product. 

In today’s article, I’ll focus on adding a custom note field on the product page with the help of custom code. It will allow customers to add order notes for each product in WooCommerce. 

So without any further ado, let’s jump into the tutorial. 

Add a Note Field For Each WooCommerce Product:

The following code will help you add a note field for each WooCommerce product, and users will be able to add notes for each product. 

1. Code to Copy

This code will display a custom field on each product page, and users can enter notes for each product. The value will also be saved and displayed on the cart and checkout page

This code will also display the custom text that users will add on the order details page and in the email sent to the customers. 

It will also validate that if the users have left the field empty, they won’t be able to add it to the cart. 

Note: Please do not change anything until you know what you are doing. The following code is tested with the Storefront theme and the latest WooCommerce and WordPress versions. 

Please let me know if there’s any problem or if the code isn’t working. I’ll be happy to revise it for you. 

// Display custom field on single product page
    function d_extra_product_field(){
        $value = isset( $_POST['extra_product_field'] ) ? sanitize_text_field( $_POST['extra_product_field'] ) : '';
        printf( '<div><label>%s</label><br><textarea name="extra_product_field" value="%s"></textarea></div>', __( 'Enter your custom text' ), esc_attr( $value ) );
    }
    add_action( 'woocommerce_after_add_to_cart_button', 'd_extra_product_field', 9 );

    // validate when add to cart
    function d_extra_field_validation($passed, $product_id, $qty){

        if( isset( $_POST['extra_product_field'] ) && sanitize_text_field( $_POST['extra_product_field'] ) == '' ){
            $product = wc_get_product( $product_id );
            wc_add_notice( sprintf( __( '%s cannot be added to the cart until you enter some text.' ), $product->get_title() ), 'error' );
            return false;
        }

        return $passed;

    }
    add_filter( 'woocommerce_add_to_cart_validation', 'd_extra_field_validation', 10, 3 );

     // add custom field data in to cart
    function d_add_cart_item_data( $cart_item, $product_id ){

        if( isset( $_POST['extra_product_field'] ) ) {
            $cart_item['extra_product_field'] = sanitize_text_field( $_POST['extra_product_field'] );
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_add_cart_item_data', 'd_add_cart_item_data', 10, 2 );

    // load data from session
    function d_get_cart_data_f_session( $cart_item, $values ) {

        if ( isset( $values['extra_product_field'] ) ){
            $cart_item['extra_product_field'] = $values['extra_product_field'];
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_get_cart_item_from_session', 'd_get_cart_data_f_session', 20, 2 );


    //add meta to order
    function d_add_order_meta( $item_id, $values ) {

        if ( ! empty( $values['extra_product_field'] ) ) {
            woocommerce_add_order_item_meta( $item_id, 'extra_product_field', $values['extra_product_field'] );           
        }
    }
    add_action( 'woocommerce_add_order_item_meta', 'd_add_order_meta', 10, 2 );

    // display data in cart
    function d_get_itemdata( $other_data, $cart_item ) {

        if ( isset( $cart_item['extra_product_field'] ) ){

            $other_data[] = array(
                'name' => __( 'Your extra field text' ),
                'value' => sanitize_text_field( $cart_item['extra_product_field'] )
            );

        }

        return $other_data;

    }
    add_filter( 'woocommerce_get_item_data', 'd_get_itemdata', 10, 2 );


    // display custom field data in order view
    function d_dis_metadata_order( $cart_item, $order_item ){

        if( isset( $order_item['extra_product_field'] ) ){
            $cart_item_meta['extra_product_field'] = $order_item['extra_product_field'];
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_order_item_product', 'd_dis_metadata_order', 10, 2 );


    // add field data in email
    function d_order_email_data( $fields ) { 
        $fields['extra_product_field'] = __( 'Your extra field text' ); 
        return $fields; 
    } 
    add_filter('woocommerce_email_order_meta_fields', 'd_order_email_data');

    // again order
    function d_order_again_meta_data( $cart_item, $order_item, $order ){

        if( isset( $order_item['extra_product_field'] ) ){
            $cart_item_meta['extra_product_field'] = $order_item['extra_product_field'];
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_order_again_cart_item_data', 'd_order_again_meta_data', 10, 3 );

2. Add Code To WooCommerce

After copying the code, you need to add it to your WordPress and WooCommerce store. To help you add it to your WooCommerce store, I have already created a detailed guide. 

Please follow the How to Add a Code Snippet to WordPress guide to do so. 

3. Final Results

Once you have added the code to your site, let’s test it. 

To test it, visit any of the product pages on your store, and you’ll notice that a custom note field has been added, and customers can add notes while ordering the product. 

Once you add the note and visit your cart or checkout page, you’ll notice that the text is also showing there. 

Similarly, it will also be displayed on the order details page so you, as the store owner, can see the notes and fulfill the user’s requirements regarding the product. 

Ending Thoughts

It is an excellent idea to allow customers to add a note for each product. This will help improve their user experience because they will not have to add all the notes on the checkout page if they order multiple items. 

It will also help you organize and efficiently fulfill the customer’s requirements.

Brian
Brian

Welcome to the AovUp blog, where we discuss all things WooCommerce. I hope we can help you achieve something today...

Leave a Reply

Your email address will not be published. Required fields are marked *

We – and our partners – use cookies to deliver our services and to show you ads. By using our website, you agree to the use of cookies as described in our Cookie Policy