Display a selected custom product option in WooCommerce cart

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;
}

enter image description here

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;
}

enter image description here

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;
}

enter image description here

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'] );
    }
}

enter image description here

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Leave a Comment