woocommerce_wp_select save selected option and display in front end - php

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.

Answer 2

You can set the options as you where doing, so this part should work as intended
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_text_field_title_110' );
function woo_add_custom_text_field_title_110(){
$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 );
}
To save the fields
// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_text_field_title_110_save' );
function woo_add_custom_text_field_title_110_save( $post_id ){
// Select
$title_top_110 = $_POST['custom_text_field_title_110'];
if( !empty( $title_top_110 ) )
update_post_meta( $post_id, 'custom_text_field_title_110', esc_attr( $title_top_110 ) );
else {
update_post_meta( $post_id, 'custom_text_field_title_110', '' );
}
}
And to output the data on single product page (this code needs to be modified to output it inside the loop)
$title_top_110 = get_post_meta( 'custom_text_field_title_110', $post->ID, true );
if( $title_top_110 ) {
printf(
'<div class="row">
<div class="col-md-4">
<img class="img-fluid box-10-2" src="%1$s/img/award-icon.png">
</div>
<div class="col-md-8 box-10">
<p class="card-text box-10-1">%2$s</p>
</div>
</div>
',
esc_html( get_bloginfo('template_directory') ),
esc_html( $title_top_110 )
);
}