在 Woocommerce 的前端显示自定义单选和复选框产品设置数据

Question

我需要在 metabox 和前端 woocommerce 上显示单选按钮和多个复选框。我能够获取文本区域和其他字段，但无法在单个产品页面上获取多个复选框和单选按钮数据，无法填充、获取和检查每种类型的数据值。

add_filter( 'woocommerce_product_data_tabs', 'product_data_tab', 99 , 1 );
function product_data_tab( $product_data_tabs ) {
      $product_data_tabs['shipping-costs'] = array(
          'label' => __( 'Extra Product Info', 'my_theme_domain' ), // translatable
          'target' => 'shipping_costs_product_data', // translatable
      );
      return $product_data_tabs;
}

     add_action( 'woocommerce_product_data_panels', 'product_data_fields' );
function product_data_fields() {
      global $post;

      $post_id = $post->ID;

      echo '<div id="shipping_costs_product_data" class="panel woocommerce_options_panel">'
     $input_checkbox = get_post_meta( $post_id, '_input_checkbox', true );
         if( empty( $input_checkbox ) ) $input_checkbox = ''; // set default value

         $input_radio = get_post_meta( $post_id, '_input_radio', true );
         if( empty( $input_radio ) ) $input_radio = ''; // set default value


        // Checkbox field
         woocommerce_wp_checkbox( array(
             'id'            => '_input_checkbox',
             'wrapper_class' => 'show_if_simple',
             'label'         => __( 'Input checkbox Label', 'my_theme_domain' ),
             'description'   => __( 'Input checkbox Description', 'my_theme_domain' ),
             // 'desc_tip'   => __( 'Input checkbox Description tip', 'my_theme_domain' ),
             // 'name'       => 'input_checkbox',
             //'cbvalue'       => 'yes', // selected if same than 'value' (default value),
            'options'       => array(
                 'value1'    => 'Option 1',
                 'value2'    => 'Option 2',
                 'value3'    => 'Option 3',
             ),
             'value'         => $input_checkbox, // <== POPULATING
         ) );

         // Radio Buttons field
         woocommerce_wp_radio( array(
             'id'            => '_input_radio',
             'wrapper_class' => 'show_if_simple',
             'label'         => __('Delivery Period ', 'my_theme_domain'),
             'description'   => __( 'Delivery Period Description', 'my_theme_domain' ),
             // 'desc_tip'   => __( 'Input Radio Description tip', 'my_theme_domain' )
            // 'name'          => 'input_radio',
             'options'       => array(
                 'less than 5 days'    => 'less than 5 days',

                 '10 days'    => '10 days',
                '15 days'    => '15 days',
                 '30 days'    => '30 days',
             ),
             'value'         => $input_radio, // <== POPULATING
         ) );

}

保存自定义产品选项卡元框的自定义字段数据：

 add_action( 'woocommerce_process_product_meta', 'shipping_costs_process_product_meta_fields_save' );
              function shipping_costs_process_product_meta_fields_save( $post_id ){



        // save the checkbox field data
         $wc_checkbox = isset( $_POST['_input_checkbox'] ) ? 'yes' : 'no';
         update_post_meta( $post_id, '_input_checkbox', $wc_checkbox );

         // save the radio button field data
         $wc_radio = isset( $_POST['_input_radio'] ) ? $_POST['_input_radio'] : '';
         update_post_meta( $post_id, '_input_radio', $wc_radio );
 }
                            // Add product custom "custom" tab
                 add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tab' );
              function woo_custom_product_tab( $tabs ) {

                $tabs['cust_tab'] = array(
                      'title'     => __( 'Extra Product Info', 'woocommerce' ),
                      'priority'  => 50,
                      'callback'  => 'woo_custom_data_product_tab_content'
                  );

                return $tabs;
              }
              // The Shipping tab content
              function woo_custom_data_product_tab_content()  {
                global $post;

        //Get the data ////get_post_meta( $post->ID
        $select2 = get_post_meta( $post->ID, '_input_checkbox', true );
        $select3 = get_post_meta( $post->ID, '_input_radio', true );

                            $output = '<div class="custom-data">';

        if( ! empty( $select2 ) )
             $output .= '<p>'. __('input_checkbox: ').'<span style="color:#96588a;">'.$select2.'</span></p>';
        if( ! empty( $select3 ) )
             $output .= '<p>'. __('Delivery Period: ').'<span style="color:#96588a;">'.$select3.'</span></p>';
                echo $output.'</div>'   

Answer 1

复选框和单选字段的工作方式不同。您一次可以有 1 个复选框，不像单选按钮。

所以正确和重新访问的代码是：

## ---- 1. Backend ---- ##

// Add a custom tab in edit product page settings
add_filter( 'woocommerce_product_data_tabs', 'product_data_tab', 90 , 1 );
function product_data_tab( $product_data_tabs ) {
    $product_data_tabs['shipping-costs'] = array(
        'label' => __( 'Extra Product Info', 'my_theme_domain' ), // translatable
        'target' => 'shipping_costs_product_data', // translatable
    );
    return $product_data_tabs;
}

// Add the content to the custom tab in edit product page settings
add_action( 'woocommerce_product_data_panels', 'product_data_fields' );
function product_data_fields() {
    global $post;

    echo '<style>fieldset.form-field._input_radio_field > legend{float:none;}</style>
        <div id="shipping_costs_product_data" class="panel woocommerce_options_panel">';

    // Checkbox field 1
    woocommerce_wp_checkbox( array(
        'id'            => '_input_checkbox1',
        'wrapper_class' => 'show_if_simple',
        'label'         => __( 'Input checkbox Label 1' ),
        'description'   => __( 'Input checkbox Description 1' )
    ) );

    // Checkbox field 2
    woocommerce_wp_checkbox( array(
        'id'            => '_input_checkbox2',
        'wrapper_class' => 'show_if_simple',
        'label'         => __( 'Input checkbox Label 2' ),
        'description'   => __( 'Input checkbox Description 2' )
    ) );

    // Checkbox field 3
    woocommerce_wp_checkbox( array(
        'id'            => '_input_checkbox3',
        'wrapper_class' => 'show_if_simple',
        'label'         => __( 'Input checkbox Label 3' ),
        'description'   => __( 'Input checkbox Description 3' )
    ) );

    // Radio Buttons field
    woocommerce_wp_radio( array(
        'id'            => '_input_radio',
        'wrapper_class' => 'show_if_simple',
        'label'         => __('Delivery Period'),
        'description'   => __( 'Delivery Period Description' ).'<br>',
        'options'       => array(
            '-5 days'       => __('Less than 5 days'),
            '10 days'       => __('10 days'),
            '15 days'       => __('15 days'),
            '30 days'       => __('30 days'),
        )
    ) );

    echo '</div>';
}

// Save the data of the custom tab in edit product page settings
add_action( 'woocommerce_process_product_meta',   'shipping_costs_process_product_meta_fields_save' );
function shipping_costs_process_product_meta_fields_save( $post_id ){
    // save the checkbox field 1 data
    $wc_checkbox = isset( $_POST['_input_checkbox1'] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_input_checkbox1', $wc_checkbox );

    // save the checkbox field 2 data
    $wc_checkbox = isset( $_POST['_input_checkbox2'] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_input_checkbox2', $wc_checkbox );

    // save the checkbox field 3 data
    $wc_checkbox = isset( $_POST['_input_checkbox3'] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_input_checkbox3', $wc_checkbox );

    // save the radio button field data
    $wc_radio = isset( $_POST['_input_radio'] ) ? $_POST['_input_radio'] : '';
    update_post_meta( $post_id, '_input_radio', $wc_radio );
}


## ---- 2. Front end ---- ##

// Add a custom tab in single product pages
add_filter( 'woocommerce_product_tabs', 'custom_product_tab' );
function custom_product_tab( $tabs ) {

    $tabs['cust_tab'] = array(
        'title'     => __( 'Extra Product Info', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'custom_product_tab_content',
    );

    return $tabs;
}

// Add the content inside the custom tab in single product pages
function custom_product_tab_content()  {
    global $post;

    $output = '<div class="custom-data">';

    ## 1. The Chekboxes (3)

    $checkbox1 = get_post_meta( $post->ID, '_input_checkbox1', true ); // Get the data - Checbox 1
    if( ! empty( $checkbox1 ) && $checkbox1 == 'yes' )
        $text_to_display = __('is "Selected"');
    else
        $text_to_display = __('is "NOT Selected"');
    $output .= '<p>'. __('Input checkbox:').' <span style="color:#96588a;">'.$text_to_display.'</span></p>';

    $checkbox2 = get_post_meta( $post->ID, '_input_checkbox2', true ); // Get the data - Checbox 2
    if( ! empty( $checkbox2 ) && $checkbox2 == 'yes' )
        $text_to_display = __('is "Selected"');
    else
        $text_to_display = __('is "NOT Selected"');
    $output .= '<p>'. __('Input checkbox:').' <span style="color:#96588a;">'.$text_to_display.'</span></p>';

    $checkbox3 = get_post_meta( $post->ID, '_input_checkbox3', true ); // Get the data - Checbox 3
    if( ! empty( $checkbox3 ) && $checkbox3 == 'yes' )
        $text_to_display = __('is "Selected"');
    else
        $text_to_display = __('is "NOT Selected"');
    $output .= '<p>'. __('Input checkbox:').' <span style="color:#96588a;">'.$text_to_display.'</span></p>';

    ## 2. Radio buttons

    $radio = get_post_meta( $post->ID, '_input_radio', true ); // Get the data
    if( ! empty( $radio ) )
        $output .= '<p>'. __('Delivery Period: ').'<span style="color:#96588a;">'.$radio.'</span></p>';
    else
        $output .= '<p>'. __('Delivery Period: ').'<span style="color:#96588a;">'.__('Not defined').'</span></p>';

    echo $output.'</div>';
}

代码进入您的活动子主题（或主题）的 function.php 文件或任何插件文件中。

在 WooCommerce 3+ 上测试并运行...您将获得：

1) 关于后端自定义标签产品设置：

2) 在单个产品页面的前端自定义标签上：