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.
On This Page
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.
