woocommerce_wp_select 保存选中的选项并显示在前端

问题描述

我遇到了关于 woocommerce_wp_select 的问题。我正在向单个产品页面添加新字段。首先，我通过以下代码添加选项：

$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','1'       => __('This product win on award.','2'       => __('This product win 2 award.','3'       => __('This product win 3 award.','4'       => __('This product very famous.','woocommerce' )
    ),); 

woocommerce_wp_select( $title_110 );

比我保存它。

$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();

但在单个产品页面的首页，而我使用：

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

我看到的是 This product does not win any awards，而不是打印 0。我正在寻找一种方法来解决它。我测试了以下方法，但它们不起作用：

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

解决方法

有一些不同的方式：

您需要通过这种方式为下拉选项添加额外的自定义函数：

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

然后你会在任何需要的地方调用这个函数：

在您的 woocommerce_wp_select() 代码的后端：

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

现在在单个产品页面的前端：

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

它应该可以工作......

另一种选择是在“选项”数组中使用相同的键和值，例如：

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

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

woocommerce_wp_select( array(
    'id'          => 'custom_text_field_title_110','options'     => $options_title_110,) );

然后自定义字段选择的值将保存在后端并显示在前端。

您可以随心所欲地设置选项，所以这部分应该按预期工作

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','desc_tip' => true,'options'     => array(
            ''        => __( 'Select Option','woocommerce' )
        ),); 
    
    woocommerce_wp_select( $title_110 );
}

保存字段

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

并输出单品页面的数据（此代码需要修改为在循环内输出）

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

custom-fields dropdown dropdown wordpress wordpress