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

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

by Tutor Aspire

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 tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 3.9
 * @donate $9     https://www.tutoraspire.com
 */

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

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

function tutoraspire_product_add_on() {
    $value = isset( $_POST['custom_text_add_on'] ) ? sanitize_text_field( $_POST['custom_text_add_on'] ) : '';
    echo '

'; } // ----------------------------------------- // 2. Throw error if custom input field empty add_filter( 'woocommerce_add_to_cart_validation', 'tutoraspire_product_add_on_validation', 10, 3 ); function tutoraspire_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', 'tutoraspire_product_add_on_cart_item_data', 10, 2 ); function tutoraspire_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', 'tutoraspire_product_add_on_display_cart', 10, 2 ); function tutoraspire_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', 'tutoraspire_product_add_on_order_item_meta', 10, 2 ); function tutoraspire_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', 'tutoraspire_product_add_on_display_order', 10, 2 ); function tutoraspire_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', 'tutoraspire_product_add_on_display_emails' ); function tutoraspire_product_add_on_display_emails( $fields ) { $fields['custom_text_add_on'] = 'Custom Text Add-On'; return $fields; }

You may also like