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

Question

我遇到了关于 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', '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 );

比我还省。

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

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

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

Answer 1

有一些不同的方式：

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

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

然后您将在需要的地方调用该函数：

在您的 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' 数组中使用相同的键和值，例如：

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

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

Answer 2

您可以随心所欲地设置选项，因此这部分应该可以正常工作

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

保存字段

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

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

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

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

woocommerce_wp_select save selected option and display in front end

php

wordpress

woocommerce

dropdown

custom-fields