There are missing things in your select field and it should be better to use a hooked function to embed it in the product inside the add to cart form (if you want to be able to get the posted value).
So below is the complete way from displaying and saving the selected size everywhere including the fields validations
1) Display the select field before add to cart button:
// Display Select field before add to cart button
add_action( 'woocommerce_before_add_to_cart_button', 'sizes_before_add_to_cart_button', 0 );
function sizes_before_add_to_cart_button() {
global $product;
// Only on simple products
if( ! $product->is_type('simple') ) return;
// When product sizes are available
if ( $sizes = $product->get_attribute( 'size' ) ) :
$sizes = explode(", ",$sizes);
$required = ' <abbr class="required" title="required">*</abbr></label>';
echo '<p class="form-row form-row-wide" id="product-size-field">
<label for="product-size">' . __('Sizes:') . $required . '</label>
<select class="product-size" name="product-size" id="product-size">
<option value="">' . __("Choose your size") . '</option>';
foreach( $sizes as $size ){
echo '<option value="' . $size . '">' . $size . '</option>';
}
echo '</select>
</p><br>';
endif;
}
2) Field validation:
add_filter( 'woocommerce_add_to_cart_validation', 'filter_add_to_cart_validation', 10, 4 );
function filter_add_to_cart_validation( $passed, $product_id, $quantity, $variation_id = 0 ) {
$product = wc_get_product($product_id);
// Only on simple products and When product sizes are available
if( ! $product->is_type('simple') && ! $product->get_attribute( 'size' ) )
return $passed;
if( isset( $_POST['product-size'] ) && empty( $_POST['product-size'] ) ) {
wc_add_notice( __("Please choose your size.", "woocommerce" ), 'error' );
$passed = false;
}
return $passed;
}
3) Add selected size as custom cart item data:
add_filter( 'woocommerce_add_cart_item_data', 'add_size_to_cart_item_data', 10, 3 );
function add_size_to_cart_item_data($cart_item_data, $product_id, $variation_id ){
if( isset( $_POST['product-size'] ) ) {
$cart_item_data['product-size'] = esc_attr( $_POST['product-size'] );
}
return $cart_item_data;
}
4) Display selected size under product name in cart and checkout pages
add_filter( 'woocommerce_get_item_data', 'display_size_on_cart_item', 10, 2 );
function display_size_on_cart_item( $cart_item_data, $cart_item ) {
if ( isset( $cart_item['product-size'] ) ){
$cart_item_data[] = array(
'name' => __('Size'),
'value' => $cart_item['product-size'],
);
}
return $cart_item_data;
}
5) Save selected size as order item meta data and display it everywhere
add_action('woocommerce_checkout_create_order_line_item', 'save_order_item_product_fitting_color', 10, 4 );
function save_order_item_product_fitting_color( $item, $cart_item_key, $cart_item, $order ) {
if( isset($cart_item['product-size']) ) {
$item->update_meta_data( 'Size', $cart_item['product-size'] );
}
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.