woocommerce_wp_select save selected option and display in front end

SallarRabiei
January 8, 2021
188 views
0 votes
2 Answers

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

Answers

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.

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

Please signup or login to give your own answer.

Click here to cancel reply.