Custom fields after product variation name in WooCommerce cart and checkout

Question

I have two custom field in a specific product. I wanna add each custom field after each variation name in cart and checkout page.

add_action('woocommerce_before_add_to_cart_button', 'action_before_add_to_cart_button', 20);

function action_before_add_to_cart_button() {
    global $post, $product;

    if (is_product() && $post->ID == 19652) {
        ?>
        <div class="custom-fields">
            <div>
                <input class="form-control alt" name="first_custom_name" type="text"
                       placeholder="<?php esc_html_e('Name for First bottle'); ?>" required>
            </div>
            <div>
                <input class="form-control alt" type="text" name="sec_custom_name"
                       placeholder="<?php esc_html_e('Name for Second bottle'); ?>">
            </div>
        </div>
        <?php
    }
}

This is the custom field for the product page, but I have no clue how to extract the data from the custom field to the cart order line. I have seen somewhere to update the meta function, but since the data is input by customers, data is updated in meta. What if a different variation is chosen? Does it have the same data? I want to add different data for different variations. Is this possible?

Answer 1

The following code, will save your custom fields, displaying them in cart, checkout, orders and email notifications.

// Utility function (your custom field settings)
function get_custom_fields_data() {
    return array(
        'first_custom_name' => esc_html__('Name for First bottle'),
        'sec_custom_name'   => esc_html__('Name for Second bottle'),
    );
}

// Displaying custom input fields in single product
add_action('woocommerce_before_add_to_cart_button', 'action_before_add_to_cart_button', 20);
function action_before_add_to_cart_button() {
    global $post, $product;

    if ( is_product() && $post->ID == 19652 ) {
        echo '<div class="custom-fields">';

        foreach ( get_custom_fields_data() as $field_key => $field_label ) {
            printf('<div><input class="form-control alt" name="%s" type="text" placeholder="%s" required>
            </div>', $field_key, $field_label );
        } 
        echo '</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 ) {
    foreach ( get_custom_fields_data() as $field_key => $field_label ) {
        if ( isset($_POST[$field_key]) && ! empty($_POST[$field_key]) ) {
            $cart_item_data[$field_key] = sanitize_text_field($_POST[$field_key]);
        }
    }
    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 ) {
    foreach ( get_custom_fields_data() as $field_key => $field_label ) {
        if( isset($cart_item[$field_key]) ) {
            $cart_data[] = array(
                'key'   => $field_label,
                'value' => $cart_item[$field_key],
            );
        }
    }
    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_data', 10, 4 );
function save_order_item_custom_meta_data( $item, $cart_item_key, $values, $order ) {
    foreach ( get_custom_fields_data() as $field_key => $field_label ) {
        if( isset($values[$field_key]) ) {
            $item->update_meta_data($field_key, $values[$field_key]); 
        }
    }
}

// Add readable "meta key" label name replacement
add_filter('woocommerce_order_item_display_meta_key', 'filter_wc_order_item_display_meta_key', 10, 3 );
function filter_wc_order_item_display_meta_key( $display_key, $meta, $item ) {
    if( $item->get_type() === 'line_item' ) {
        foreach ( get_custom_fields_data() as $field_key => $field_label ) {
            if( $meta->key === $field_key ) {
                $display_key = $field_label;
            }
        }
    }
    return $display_key;
}

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