Display a selected custom product option in WooCommerce cart

Question

I am using the code below to display a custom select field on WooCommerce single product pages:

<?php $sizes = $product->get_attribute( 'size' ); $sizes = explode(", ",$sizes); ?>
<?php if($sizes[0]!=''){ // if product sizes are available ?>
    <span class="product-size-label">Choose your size:</span>
    <select class="product-size">
    <?php foreach($sizes as $size){ ?>
        <option><?php echo $size; ?></option>
    <?php } ?>
    </select>
<?php } ?>

Now need get the selected size and display it in cart page below title.

How can I do that for simple products type?

I don't want use variation products.

Answer 1

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 = '&nbsp;<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.