以編程方式添加自定義設置選項卡以管理 WooCommerce 中的產品數據

Question

我想以編程方式將設置選項卡添加到產品數據元框，如下所示：

“Verzendkosten”標簽添加了螢火蟲（意思是“運費） 。

我將如何在 woocommerce 編輯產品頁面設置中以編程方式添加“Verzendkosten”自定義選項卡？

（以及我如何能夠用數據填充它？）

Answer 1

2017 年 11 月更新：

• 更正了一些錯誤，清理並添加了可用選項
• 最后為自定義字段 slug 添加了“用法”和“命名約定” 。

1）您在自定義帖子類型Metabox（此處為“產品”）中創建自定義選項卡，
2）然后您可以添加字段來填充此選項卡，使用不同類型的字段（您會發現每種類型中的一個，所以這是一個非常完整的示例）。

最后你會發現一個在提交時保存數據的功能。

這是您將獲得的視覺效果（對於 6 種不同的自定義字段類型）：

下面是相關代碼：

// Step 1 - Adding a custom tab to the Products Metabox
add_filter( 'woocommerce_product_data_tabs', 'add_shipping_costs_product_data_tab', 99 , 1 );
function add_shipping_costs_product_data_tab( $product_data_tabs ) {
    $product_data_tabs['shipping-costs'] = array(
        'label' => __( 'Shipping costs', 'my_theme_domain' ), // translatable
        'target' => 'shipping_costs_product_data', // translatable
    );
    return $product_data_tabs;
}

// Step 2 - Adding and POPULATING (with data) custom fields in custom tab for Product Metabox
add_action( 'woocommerce_product_data_panels', 'add_shipping_costs_product_data_fields' );
function add_shipping_costs_product_data_fields() {
    global $post;

    $post_id = $post->ID;

    echo '<div id="shipping_costs_product_data" class="panel woocommerce_options_panel">';

    ## THE 6 DIFFERENT FIELD TYPES

    # 1. Text input field
    woocommerce_wp_text_input( array(
        'id'            => '_input_text',
        // 'name'         => '_input_text', // (optional) for different ID attribute than name attribute
        // 'class'         => 'some-class', // (optional)
        // 'wrapper_class' => 'show_if_simple', // (optional) example here for simple products type only
        'placeholder'   => __( 'Enter some data', 'theme_domain' ), // (optional)
        'label'         => __( 'input text Label', 'theme_domain' ), // (optional)
        'description'   => __( 'input text  Description', 'theme_domain' ), // (optional)
        'desc_tip'      => true, // (optional) To show the description as a tip
        // 'data_type'     => '', // (optional formatting options) can be 'price', 'decimal', 'stock' or 'url'
        // 'type'          => '', // (optional additional custom attribute)
        // 'value'         => $value, // (optional) for a static value (can be conditionally set for $value variable)
    ) );

    // 2. Textarea input field
    woocommerce_wp_textarea_input( array(
        'id'            => '_input_textarea',
        // 'name'         => 'input_textarea', // (optional) for different ID attribute than name attribute
        'class'         => 'widefat', // (optional)
        // 'style'         => '' // (optional)
        // 'wrapper_class' => 'show_if_simple', // (optional) example here for simple products type only
        'placeholder'   => __( 'Enter some data', 'theme_domain' ), // (optional)
        'label'         => __( 'input textarea Label', 'theme_domain' ),
        'description'   => __( 'input textarea Description', 'theme_domain' ),
        'desc_tip'      => true, // (optional) To show the description as a tip
        // 'rows'          => 2, // (optional) defining number of rows
        // 'cols'          => 20, // (optional) defining number of columns
        // 'value'         => $value, // (optional) for a static value (can be conditionally set for $value variable)
    ) );

    // 3. Checkbox field
    woocommerce_wp_checkbox( array(
        'id'            => '_input_checkbox',
        // 'name'         => 'input_checkbox', // (optional) for different ID attribute than name attribute
        // 'class'         => 'some-class', // (optional)
        // 'wrapper_class' => 'show_if_simple', // (optional) example here for simple products type only
        'label'         => __( 'input checkbox Label', 'theme_domain' ),
        'description'   => __( 'input checkbox Description', 'theme_domain' ),
        'desc_tip'      => true, // (optional) To show the description as a tip
        // 'cbvalue'       => 'yes', // to make it selected by default
        // 'value'         => $value, // (optional) for a static value (can be conditionally set for $value variable)
    ) );

    // 4. Radio Buttons field
    woocommerce_wp_radio( array(
        'id'            => '_input_radio',
        // 'name'          => 'input_radio', // (optional) for different ID attribute than name attribute
        // 'class'         => 'some-class', // (optional)
        // 'wrapper_class' => 'show_if_simple', // (optional) example here for simple products type only
        'label'         => __(' ', 'my_theme_domain'),
        'description'   => __( 'input Radio Description', 'my_theme_domain' ),
        'desc_tip'      => true,
        'options'       => array(
            'option_value_1'    => __('Displayed option 1'),
            'option_value_2'    => __('Displayed option 2'),
            'option_value_3'    => __('Displayed option 3'),
        ),
        // 'value'         => $value, // (optional) for a static value (can be conditionally set for $value variable)
    ) );

    // 5. Select field
    woocommerce_wp_select( array(
        'id'                => '_select_field',
        // 'name'              => '_select_field', // (optional) for different ID attribute than name attribute
        // 'wrapper_class' => 'show_if_simple', // (optional) example here for simple products type only
        'label'         => __(' ', 'my_theme_domain'),
        'description'   => __( 'input Radio Description', 'my_theme_domain' ),
        'desc_tip'      => true,
        'options'       => array(
            ''               => __('Chose an option'), // Default empty value
            'option_value_1' => __('Displayed option 1'),
            'option_value_2' => __('Displayed option 2'),
            'option_value_3' => __('Displayed option 3')
        ),
        // 'value'         => $value, // (optional) for a static value (can be conditionally set for $value variable)
    ) );

    // 6. Hidden input field
    woocommerce_wp_hidden_input( array(
        'id'            => '_hidden_input',
        // 'name'              => '_hidden_input', // (optional) for different ID attribute than name attribute
        'class'         => 'some_class',
        // 'value'         => $value, // (optional) for a static value (can be conditionally set for $value variable)
    ) );

    echo '</div>';
}

// Step 3 - Saving custom fields data of custom products tab metabox
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 text field data
    if( isset( $_POST['_input_text'] ) )
        update_post_meta( $post_id, '_input_text', esc_attr( $_POST['_input_text'] ) );

    // save the textarea field data
    if( isset( $_POST['_input_textarea'] ) )
        update_post_meta( $post_id, '_input_textarea', esc_attr( $_POST['_input_textarea'] ) );

    // save the checkbox field data
    if( isset( $_POST['_input_checkbox'] ) )
        update_post_meta( $post_id, '_input_checkbox', esc_attr( $_POST['_input_checkbox'] ) );

    // save the radio button field data
    if( isset( $_POST['_input_radio'] ) )
        update_post_meta( $post_id, '_input_radio', esc_attr( $_POST['_input_radio'] ) );

    // save the selector field data
    if( isset( $_POST['_select_field'] ) )
        update_post_meta( $post_id, '_select_field', esc_attr( $_POST['_select_field'] ) );

    // save the hidden input data
    if( isset( $_POST['_hidden_input'] ) )
        update_post_meta( $post_id, '_hidden_input', esc_attr( $_POST['_hidden_input'] ) );
}

當然，這會在您的活動子主題（或主題）或任何插件文件的 function.php 文件中進行。

您必須在第 2 步和第 3 步中使用相同的自定義字段 ID （slug 名稱） 。

此代碼經過測試且功能齊全

您可以使用任何數據添加自定義選項，使用自定義代碼、自定義變量或步驟 2 中的任何類型的函數。

---

用法

要獲取或檢索數據，您將對定義的Post ID使用get_post_meta()函數：

 $custom_field_data = get_post_meta( $post_id, '_custom_field_slug', true );

哪里：

• $post_id是當前的帖子 ID（來自產品、訂單、優惠券……帖子類型）。
• custom_field_slug是您的自定義字段的 ID（slug）。
• true或false ：是否返回單個值（數據字符串或數組）

每種字段都是相同的過程

---

建議 - 自定義字段段名稱（自定義字段 ID）

如果您不在自定義字段的slug 名稱開頭使用下划線字符( _slug_name ) ，則在提交數據（更新按鈕）后，自定義字段 Metabox中的授權用戶將顯示這些名稱並可供授權用戶訪問。

看到這個屏幕截圖（在這里我們得到input_text自定義字段 slug） ：

---

參考資料：

• 添加僅在 woocommerce 產品的管理端可見的選項卡
• 包 WooCommerce > 管理 > 功能
• 單個產品字段的 WooCommerce 多選
• WP 代碼參考 - get_post_meta()
• WP 代碼參考 - update_post_meta()