Wordpress - Customize WooCommerce single product with an additional input field

Mativve
April 2, 2024
207 views
0 votes
2 Answers

Well, I have a problem, I am wondering how I can create additional inputs above the "quantity of items" and "add to cart" sections so that the customer can personalize their product for themselves. I’d like to be able to do this myself in my theme without plugins unless any actually meet these goals.

I am wondering if a good choice is to use the ‘woocommerce_before_add_to_cart_button’ hookup? How do I later add the values of these inputs to this product to be able to display them in the order summary?

Currently I have this code that adds the field itself.

Unfortunately, these fields do not display either in the shopping cart, the order summary or the order in the ACP. What am I doing wrong? Is this the right way to go?

function my_personalization_field() {
    $html = '<div class="personalization-field">';
        $html .= '<label for="personalization">Personalization:</label>';
        $html .= '<input type="text" id="personalization" name="my_personalization" />';
    $html .= '</div>';

    echo $html;
}
add_action('woocommerce_before_add_to_cart_button', 'my_personalization_field');


function my_adding_custom_data_in_order_items_meta( $item_id, $values, $cart_item_key ) {
    if ( isset($values['my_personalization']) ) {
        $custom_value = $values['my_personalization'];
        wc_add_order_item_meta($item_id, 'my_personalization', $custom_value );
    }
}
add_action('woocommerce_add_order_item_meta','my_adding_custom_data_in_order_items_meta', 10, 3 );

function my_display_personalization_data_in_cart($product_name, $cart_item, $cart_item_key) {
    if(isset($cart_item['my_personalization'])) {
        $product_name .= '<br><small>Personalization: ' . esc_html($cart_item['my_personalization']) . '</small>';
    }

    return $product_name;
}
add_filter('woocommerce_cart_item_name', 'my_display_personalization_data_in_cart', 10, 3);

Answers

You would need to add that data to the cart session and then you can access that on cart/checkout/order page.

// This captures additional posted information
function custom_add_item_data($cart_item_data, $product_id) {

    global $woocommerce;

    if(!isset($_POST['my_personalization']))
       return $cart_item_data;
    
    $new_value = array();
    $new_value['my_personalization'] = $_POST['my_personalization'];

    if(empty($cart_item_data)) {
        return $new_value;
    } else {
        return array_merge($cart_item_data, $new_value);
    }
}
add_filter('woocommerce_add_cart_item_data','custom_add_item_data',1,10);

// This captures the information from the previous function and attaches it to the item.
function custom_get_cart_items_from_session($item,$values,$key) {

    if (array_key_exists( 'my_personalization', $values ) ) {
        $item['my_personalization'] = $values['my_personalization'];
    }

    return $item;
}
add_filter('woocommerce_get_cart_item_from_session', 'custom_get_cart_items_from_session', 1, 3 );

Your code is a bit outdated and incomplete. Try use the following replacement code to display your custom field value in cart, checkout, orders and email notifications:

add_action('woocommerce_before_add_to_cart_button', 'single_product_custom_field_display');
function single_product_custom_field_display() {
    echo '<div class="personalization-field">
    <label for="personalization">'.__('Personalization:').'</label>
    <input type="text" id="personalization" name="personalization" />
    </div>';
}

// Save custom fields as custom cart item data
add_filter('woocommerce_add_cart_item_data', 'add_custom_cart_item_data', 20, 2 );
function add_custom_cart_item_data( $cart_item_data, $product_id ) {
    if ( isset($_POST['personalization']) ) {
        $cart_item_data['personalization'] = sanitize_text_field($_POST['personalization']);
    }
    return $cart_item_data;
}

// Display custom fields in Cart and Checkout
add_filter( 'woocommerce_get_item_data', 'display_custom_cart_item_data', 20, 2 );
function display_custom_cart_item_data( $cart_data, $cart_item ) {
    if( isset($cart_item['personalization']) ) {
        $cart_data[] = array(
            'key'   => __('Personalization'),
            'value' => $cart_item['personalization'],
        );
    }
    return $cart_data;
}

// Save and display custom fields (custom order item metadata)
add_action( 'woocommerce_checkout_create_order_line_item', 'save_order_item_custom_meta_data6', 10, 4 );
function save_order_item_custom_meta_data6( $item, $cart_item_key, $values, $order ) {
    if( isset($values['personalization']) ) {
        $item->update_meta_data('personalization', $values['personalization']); 
    }
}

// Add readable "meta key" label name replacement
add_filter('woocommerce_order_item_display_meta_key', 'filter_wc_order_item_display_meta_key6', 10, 3 );
function filter_wc_order_item_display_meta_key6( $display_key, $meta, $item ) {
    if( $item->get_type() === 'line_item' ) {
        if( $meta->key === 'personalization' ) {
            $display_key = __('Personalization');
        }
    }
    return $display_key;
}

Code goes in functions.php file of your child theme (or in a plugin). Tested and works.