WooCommerce: Product Add-Ons (Without a Plugin!)

WooCommerce product add-ons are custom input fields that show on the single product page. They’re called “add-ons” as you can add a product personalization or an upsell (at a cost of course).

For example, you can display a text input to print something on the product. Or radio buttons to select different kinds of product upgrades. Or a checkbox to upsell gift wrapping.

Either way, and of course, there are plugins for that. But first, I want to give you a tutorial to code this by yourself (case study: global custom input text field and no surcharge), so that you can learn something new. Enjoy!

Add a custom input field to each product @ WooCommerce Single Product page

PHP Snippet: Show Custom Input Field @ WooCommerce Single Product Page

/**
 * @snippet       Add input field to products - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.9
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

// -----------------------------------------
// 1. Show custom input field above Add to Cart

add_action( 'woocommerce_before_add_to_cart_button', 'bbloomer_product_add_on', 9 );

function bbloomer_product_add_on() {
    $value = isset( $_POST['custom_text_add_on'] ) ? sanitize_text_field( $_POST['custom_text_add_on'] ) : '';
    echo '<div><label>Custom Text Add-On <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' . $value . '"></p></div>';
}

// -----------------------------------------
// 2. Throw error if custom input field empty

add_filter( 'woocommerce_add_to_cart_validation', 'bbloomer_product_add_on_validation', 10, 3 );

function bbloomer_product_add_on_validation( $passed, $product_id, $qty ){
   if( isset( $_POST['custom_text_add_on'] ) && sanitize_text_field( $_POST['custom_text_add_on'] ) == '' ) {
      wc_add_notice( 'Custom Text Add-On is a required field', 'error' );
      $passed = false;
   }
   return $passed;
}

// -----------------------------------------
// 3. Save custom input field value into cart item data

add_filter( 'woocommerce_add_cart_item_data', 'bbloomer_product_add_on_cart_item_data', 10, 2 );

function bbloomer_product_add_on_cart_item_data( $cart_item, $product_id ){
    if( isset( $_POST['custom_text_add_on'] ) ) {
        $cart_item['custom_text_add_on'] = sanitize_text_field( $_POST['custom_text_add_on'] );
    }
    return $cart_item;
}

// -----------------------------------------
// 4. Display custom input field value @ Cart

add_filter( 'woocommerce_get_item_data', 'bbloomer_product_add_on_display_cart', 10, 2 );

function bbloomer_product_add_on_display_cart( $data, $cart_item ) {
    if ( isset( $cart_item['custom_text_add_on'] ) ){
        $data[] = array(
            'name' => 'Custom Text Add-On',
            'value' => sanitize_text_field( $cart_item['custom_text_add_on'] )
        );
    }
    return $data;
}

// -----------------------------------------
// 5. Save custom input field value into order item meta

add_action( 'woocommerce_add_order_item_meta', 'bbloomer_product_add_on_order_item_meta', 10, 2 );

function bbloomer_product_add_on_order_item_meta( $item_id, $values ) {
    if ( ! empty( $values['custom_text_add_on'] ) ) {
        wc_add_order_item_meta( $item_id, 'Custom Text Add-On', $values['custom_text_add_on'], true );
    }
}

// -----------------------------------------
// 6. Display custom input field value into order table

add_filter( 'woocommerce_order_item_product', 'bbloomer_product_add_on_display_order', 10, 2 );

function bbloomer_product_add_on_display_order( $cart_item, $order_item ){
    if( isset( $order_item['custom_text_add_on'] ) ){
        $cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'];
    }
    return $cart_item;
}

// -----------------------------------------
// 7. Display custom input field value into order emails

add_filter( 'woocommerce_email_order_meta_fields', 'bbloomer_product_add_on_display_emails' );

function bbloomer_product_add_on_display_emails( $fields ) { 
    $fields['custom_text_add_on'] = 'Custom Text Add-On';
    return $fields; 
}

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (delete "?>" if you have it there). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.3.

If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

51 thoughts on “WooCommerce: Product Add-Ons (Without a Plugin!)

  1. Great code. Is it possible to edit it to store the custom text in the product title? My shipping program does not recognize the extra field. It only pulls information from the title.

    1. Hi Josh thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. Thanks for the snippet, saved my day.

    Is it possible to extend its functionality to include added cost for custom fields. Like when a custom field is checked / selected or filled with specific value, a pre-determined extra price is applied to the product price. Is it to be done with PHP or JS or both. I am curious how it could get implemented.

    Thanks

    1. Thanks for your comment Shawn! As of now, this snippet does not come with custom pricing. I’ll see if in the future I can provide an add-on to make it work the way you want. Stay tuned!

  3. Hi. This code is really awesome. Thank you for sharing it. I’m looking to do exactly this, but with a bit of a twist. I have a few variations set for my product, and I want the custom field to only appear if a particular option is chosen from one of my variations. How complicated would it be to do this?

    1. Hi Don, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  4. Hi. Awesome code! How could I add this for a downloadable file add on?

    1. Hi Jennie, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  5. Dear, would it be possible to limit this snippet to just 1 particular product?
    Could I add the

    if ( $product->get_id() !== 21 ) {
    return;

    somewhere? There’s only 1 product that needs the engraving option on my website…
    Thomas

    1. Absolutely. I suggest you take a look at “conditional logic”: https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Enjoy 🙂

  6. Hello,

    Thank you very much for the great tutorial and code!!

    I am working on the first function (

    bbloomer_product_add_on()

    ), adding a

    <script>

    in javascript to preview the text, but I have a trouble with the code. The point is, if I keep

    echo' ';

    line as in your example, the javascript doesn’t run properly. However, if I add the label

    <form>

    and

    </form>

    in the same

    echo' ';

    line of your example, after and before the

    <div>

    , the javascript code works perfectly, but the rest of the php code doesn’t. The value is not saved in the variable

    $value

    and the button Add to Cart doesn’t work.

    Is there any way to solve it? I have been searching on the internet but I haven’t found nothing about incompatibilites between php and javascript nor problems with the label .

    Thank you in advance!
    Phil

    1. Hi Phil, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  7. Hi
    First thanks for great tutorials.

    i have a problem with this snippet (unchanged) it generates error: Notice: Undefined index: _custom_text_add_on
    from this line of code: $value = isset( $_POST[‘custom_text_add_on’] ) ? sanitize_text_field( $_POST[‘_custom_text_add_on’] ) : ”;
    this appears when text field is not used (no text entered) when trying to buy product. any fix for this?

    WP and Woo are fully updated where i try this snippet.

    1. That must be a bug – there is an extra underscore at the beginning here: “_custom_text_add_on”. I’ve now revised the snippet, test again please 🙂

  8. How can I use text field instead of radio button on my single product page?

    1. Hi Reza, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  9. Hi, thank you very much for your very valuable material. I have a question for you. Can your code be displayed in a different place with a different snippet than “woocommerce_before_add_to_cart_button” ?

  10. Anyway to ensure the style of this field matches the rest of the page? No class gets applied to the DIV

    1. Hey Shiva, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  11. woocommerce_add_order_item_meta is deprecated since version 3.0.0

    Can you update it?

    1. I’m now using “wc_add_order_item_meta” here. That ok?

  12. Hello,
    I want to get word file instead of text in product page.
    How can i place browse field option on product page.?

    1. Hi Asad, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  13. Thank you for this. It’s very helpful!

    // 6. Display custom input field value into order table

    $cart_item_meta is not defined. Should it be $cart_item?

    1. Yes, well spotted! Thanks

  14. Great! Works perfect, but is it possible to add as many fields as you like? I need about 6 on my page.

    1. Hello Dan, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  15. Hello,

    on product page everything display perfect but in cart I have this “Warning: Invalid argument supplied for foreach()”

    What should I do?

    1. Hi Monika, did you use my exact code?

  16. Hello sir,
    I want to replace text field by checkbox field, how can I do that?
    Thanks.

    1. Hi Bakintek, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  17. Great code Sir!

    Thank You very much.

    I have 1 question regarding the product input field: is it possible to check (via Ajax?) if desired entry for a specific product already exist and if so notify customer to input some other value?

    Thanks in advance

    1. Hello Simo, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  18. Great post, thank you very much for the time and effort.
    Could you give us a hint on how to add a surcharge depending on product add-ons such as the text field of this snippet?
    I´m guessing there must be some filter hooks that allow it, but I am having difficulties finding them among all the info of the WooCommerce documentation.

    1. This should work, put it between „Save custom input field value into cart item data” and „Display custom input field value at Cart” section:

      // 3,5. Add fee ;)
      
      add_action( 'woocommerce_cart_calculate_fees', 'bbloomer_add_checkout_fee' );
        
      function bbloomer_add_checkout_fee() {
         foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
              if (!empty( $cart_item['custom_text_add_on'] ) ) {
              	WC()->cart->add_fee( 'Product Add-on fee', 55 );
                  break;
              }
          }
      }
      1. Hello,

        Jumping over this great code 🙂

        Thank you for this. Any idea now on how to multiply the surcharge linked to a product variation ?

        However, I wish to add a radio checkbox with “Add some eggs (+10$)” but depending on the length of the chosen variation it would be a higher price than 10$.

        Is it possible to link this function to a product variation ?

        Many thanks for your help.

        1. Hi Gauthier, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

          1. With the help of the above script I managed to calculate an amount for adding text. However, when I pay for two or three or more products by entering text, I will only be charged once. Can this be solved by having to calculate costs for each product?

            1. I guess can you not multiply the amount by the product quantity?

  19. Your page is a greate help to understand how woocommerce / php work and to modify.
    Just have the problem that I have 2 languages. Normal pages and products are translated with WPML but if I do something in function.php how can I check the language or give different content for each language – for example the field description?

  20. Hi, this is great!
    However, I’ve tested it on a couple of sites and doesn’t seem to save/show the field’s value on the cart, checkout or confirmation email. Is this code saving the value in the database?
    Thank you!!

    1. Hi, having the same problem: the field is shown on the details page but not when it comes to checkout or paywall.

      Btw: thanks for the work you are doing here!

      1. Did you customize my snippet?

  21. it doesn’t carry the text over to the cart and neither does it save it to the order or display the text on the thank you page.

    1. You’re right Jess, sorry, I got confused between “_custom_text_add_on” and “custom_text_add_on” in part 3. Should work now, please let me know 🙂

  22. I think this is a great addition to products such as nameplate necklaces. I’ve added a custom field to the checkout page for such instances. BUT… how would you implement this code to show up only on certain product pages and not all of them?

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Your email address will not be published.