Whether you are using WooCommerce, Shopify, or another e-Commerce platform, you may have a product that you want to capture some additional information from the customer. Perhaps it is a name for a hat, jacket, or t-shirt. I see this type of question asked a good bit in the WooCommerce groups I frequent on Facebook. Oftentimes, shop owners are looking for a plugin to accomplish this. However, I don’t think you need a full plugin for this type of enhancement. A few lines of PHP in the child theme will do it. I made it a point to research a solution and learn how to add this functionality with PHP. Learn with me in this article.
The Newsletter for PHP and MySQL Developers
Receive a copy of my ebook, “10 MySQL Tips For Everyone”, absolutely free when you subscribe to the OpenLampTech newsletter.
Note: All of the examples in this post are part of a development/learning WooCommerce install using the default Storefront theme. PHP code is placed in the child theme’s function.php file.
It makes the most sense to me for this type of customization to target a specific product or a group of related products instead of all the products in the online shop.
For this example, I’ll use the $product object’s get_id() method and target a sample Hoodie product:
// 1. Place custom input field for name above Add to Cart button
add_action( 'woocommerce_before_add_to_cart_button', 'woo_custom_product_add_on', 9 );
function woo_custom_product_add_on() {
global $product;
if (13 === $product->get_id()) {
$value = isset( $_POST['woo_custom_text_add_on_for_name'] ) ? sanitize_text_field( $_POST['woo_custom_text_add_on_for_name'] ) : '';
echo '<div><label>Name on Hoodie <abbr class="required" title="required">*</abbr></label><p><input name="woo_custom_text_add_on_for_name" value="' . $value . '"></p></div>';
}
}
You can see on the Single Product page for the Hoodie product, there is now an additional input box with the label “Name on Hoodie” above the Add to cart button and the quantity field.
If this additional piece of data is something you’re expecting in your order information, it would be best to make it mandatory. Should the user not supply the custom name text, we can prompt them with an error message using the wc_add_notice() function:
// 2. Show error to user since we want the custom name to be mandatory
add_filter( 'woocommerce_add_to_cart_validation', 'woo_product_name_add_on_validation', 10, 3 );
function woo_product_name_add_on_validation( $passed, $product_id, $qty ){
if( isset( $_POST['woo_custom_text_add_on_for_name'] ) && sanitize_text_field( $_POST['woo_custom_text_add_on_for_name'] ) == '' ) {
wc_add_notice( 'Custom Name on Hoodie is required for this purchase', 'error' );
$passed = false;
}
return $passed;
}
Next, we need to continue and capture this value and include the custom text field in the shopping cart:
// 3. Save custom name field value into cart item data
add_filter( 'woocommerce_add_cart_item_data', 'woo_product_name_add_on_cart_item_data', 10, 2 );
function woo_product_name_add_on_cart_item_data( $cart_item, $product_id ){
if( isset( $_POST['woo_custom_text_add_on_for_name'] ) ) {
$cart_item['woo_custom_text_add_on_for_name'] = sanitize_text_field( $_POST['woo_custom_text_add_on_for_name'] );
}
return $cart_item;
}
At this point, the custom text field for the ‘Name on Hoodie’ value is in the Cart and we can display it again in the Order information. I think this is a good idea since maybe the customer will spot any error(s) (if present):
// 4. Show custom name field data in the cart
add_filter( 'woocommerce_get_item_data', 'woo_product_name_add_on_display_cart', 10, 2 );
function woo_product_name_add_on_display_cart( $data, $cart_item ) {
if ( isset( $cart_item['woo_custom_text_add_on_for_name'] ) ){
$data[] = array(
'name' => 'Custom Text Add-On',
'value' => sanitize_text_field( $cart_item['woo_custom_text_add_on_for_name'] )
);
}
return $data;
}
(Note: Visit the Credit Resources supporting article for additional steps in processing the Order data with the custom text field. That functionality is not covered in this blog article.)
Credit Resources
Thanks to this fantastic resource, I was able to learn about and eventually write this article: https://www.businessbloomer.com/woocommerce-product-add-ons-without-plugin/
If you see any mistakes in the code or know of more sound practices for this type of requirement, please share them freely in the comments section below.
Thank you for reading this post. Please share it with someone else who would enjoy it as well.
Josh Otwell has a passion to grow as a PHP Developer, SQL expert, and technical blogger/writer.
Disclaimer: The majority of examples in this post, are performed in a personal development/learning workstation environment and should not be considered production quality or ready. Your particular goals and needs may vary. Like always, just because you can do something doesn’t mean you should. My opinions are my own.
More ways I can help
- Need hosting for your next web application or WordPress site? I highly recommend Hostinger and use them to host my niche bass fishing site. The service is second to none.
- 🔒5 Truths I’ve Come To Realize As a Self-taught Developer
- Desktop and mobile wallpapers, digital downloads, photography services, Shopify and WooCommerce customizations, and content writing – all in one E-commerce Shop. Find your next digital purchase today!
Disclosure: Some of this blog post’s services and product links are affiliate links. At no additional cost to you, should you make a purchase by clicking through one of them, I will receive a commission.
The Newsletter for PHP and MySQL Developers
Receive a copy of my ebook, “10 MySQL Tips For Everyone”, absolutely free when you subscribe to the OpenLampTech newsletter.
📰 Get your brand, product, or service the attention it deserves with affordable classified ad placement in the OpenLampTech newsletter. I appreciate your support!