1

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.

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.