woocommerce_wp_select save selected option and display in front end

Question

I face a problem regarding woocommerce_wp_select . I am adding new fields to the single product page. First, I add the options by the following codes:

$title_110 = array(
    'id' => 'custom_text_field_title_110',
    'label' => __( 'Awards', 'rasa_store' ),
    'desc_tip' => true,
    'description' => __( 'Select an option.', 'ctwc' ),
    'options'     => array(
        ''        => __( 'Select Option', 'woocommerce' ),
        '0'       => __('This product does not win any awards', 'woocommerce' ),
        '1'       => __('This product win on award.', 'woocommerce' ),
        '2'       => __('This product win 2 award.', 'woocommerce' ),
        '3'       => __('This product win 3 award.', 'woocommerce' ),
        '4'       => __('This product very famous.', 'woocommerce' )
    ),
    ); 

woocommerce_wp_select( $title_110 );

Than I save it.

$attribute_110 = wc_get_product( $post_id );
$title_top_110 = isset( $_POST['custom_text_field_title_110'] ) ? $_POST['custom_text_field_title_110'] : '';
$attribute_110->update_meta_data( 'custom_text_field_title_110', sanitize_text_field( $title_top_110 ) );
$attribute_110->save();

But in front page of single product page, while I use :

$attribute_11 = wc_get_product ( $post->ID );
$title_top_110 = $attribute_11->get_meta( 'custom_text_field_title_110' );
if( $title_top_110  ) {
printf(
'<div class="row">
<div class="col-md-4">
<img class="img-fluid box-10-2" src="%s/img/award-icon.png">
</div>
<div class="col-md-8 box-10">
<p class="card-text box-10-1">%s</p>
</div>
</div>
',
esc_html( get_bloginfo('template_directory')  ),
esc_html( $title_top_110 )
);
}

Instead of printing This product does not win any awards I see 0. I am looking for finding a way to fix it. I test the following methods, and they do not work:

1. Replaced update_post_meta() by get_post_meta()
2. Replaced esc_html to esc_sql

Answer 1

There are some different ways:

You need an additional custom function for your dropdown options this way:

function custom_field_options_title_110() {
    return array(
        ''        => __( 'Select Option', 'woocommerce' ),
        '0'       => __('This product does not win any awards', 'woocommerce' ),
        '1'       => __('This product win on award.', 'woocommerce' ),
        '2'       => __('This product win 2 award.', 'woocommerce' ),
        '3'       => __('This product win 3 award.', 'woocommerce' ),
        '4'       => __('This product very famous.', 'woocommerce' )
    );
}

Then you will call that function everywhere is needed:

• In backend on your woocommerce_wp_select() code:

  woocommerce_wp_select( array(
      'id'          => 'custom_text_field_title_110',
      'label'       => __( 'Awards', 'rasa_store' ),
      'desc_tip'    => true,
      'description' => __( 'Select an option.', 'ctwc' ),
      'options'     => custom_field_options_title_110(), // <== Here we call our options function
  ) ); 
  

• And now on frontend for single product page:

  $attribute_11 = wc_get_product ( $post->ID );
  $title_top_110 = $attribute_11->get_meta( 'custom_text_field_title_110' );
  if( ! empty($title_top_110) ) {
      printf( '<div class="row"><div class="col-md-4"><img class="img-fluid box-10-2" src="%s"></div>
          <div class="col-md-8 box-10"><p class="card-text box-10-1">%s</p></div></div>',
          esc_html( get_bloginfo('template_directory') . '/img/award-icon.png'  ),
          esc_html( custom_field_options_title_110()[$title_top_110] ) // <== HERE we use it
      );
  }
  

It should work…

---

Another alternative is to have the same keys and values in your 'options' array like:

$options_title_110 = array( '' => __( 'Select Option', 'woocommerce' ) );

foreach ( array(
    __('This product does not win any awards', 'woocommerce' ),
    __('This product win on award.', 'woocommerce' ),
    __('This product win 2 award.', 'woocommerce' ),
    __('This product win 3 award.', 'woocommerce' ),
    __('This product very famous.', 'woocommerce' )
) as $label ) {
    $options_title_110[$label] = $label;
}

woocommerce_wp_select( array(
    'id'          => 'custom_text_field_title_110',
    'label'       => __( 'Awards', 'rasa_store' ),
    'desc_tip'    => true,
    'description' => __( 'Select an option.', 'ctwc' ),
    'options'     => $options_title_110,
) );

Then the custom field selected value will be saved on backend and displayed on front end.