以编程方式添加自定义设置选项卡以管理 WooCommerce 中的产品数据 [英] Adding programmatically a custom settings tab to admin product data in WooCommerce
本文介绍了以编程方式添加自定义设置选项卡以管理 WooCommerce 中的产品数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想以编程方式将设置选项卡添加到产品数据元框，如下所示:
Verzendkosten"标签添加了萤火虫(意思是运费).
如何在 woocommerce 编辑产品页面设置中以编程方式添加Verzendkosten"自定义选项卡?
(以及如何用数据填充它?)
解决方案
2017 年 11 月更新:
- 更正了一些错误，清理并添加了可用选项
- 最后为自定义字段段添加了用法"和命名约定".
1) 您在自定义帖子类型 Metabox(此处为产品")中创建一个自定义选项卡，
2) 然后您可以添加字段来填充此选项卡，使用不同类型的字段(您会发现其中一个每种类型，所以这是一个非常完整的示例).
最后你会发现提交时保存数据的功能.
这是您将获得的视觉效果(对于 6 种不同的自定义字段类型):
相关代码如下:
//第 1 步 - 向 Products Metabox 添加自定义选项卡add_filter( 'woocommerce_product_data_tabs', 'add_shipping_costs_product_data_tab', 99 , 1 );函数 add_shipping_costs_product_data_tab( $product_data_tabs ) {$product_data_tabs['shipping-costs'] = array('标签' =>__( '运费', 'my_theme_domain' ),//可翻译'目标' =>'shipping_costs_product_data',//可翻译);返回 $product_data_tabs;}//第 2 步 - 在 Product Metabox 的自定义选项卡中添加和填充(使用数据)自定义字段add_action('woocommerce_product_data_panels', 'add_shipping_costs_product_data_fields');函数 add_shipping_costs_product_data_fields() {全球 $post;$post_id = $post->ID;echo '<div id="shipping_costs_product_data" class="panel woocommerce_options_panel">';## 6 种不同的字段类型# 1. 文本输入字段woocommerce_wp_text_input(数组('id' =>'_输入文本'，//'名称' =>'_input_text',//(可选)用于与名称属性不同的 ID 属性//'类' =>'some-class',//(可选)//'wrapper_class' =>'show_if_simple',//(可选)此处仅用于简单产品类型的示例'占位符' =>__( '输入一些数据', 'theme_domain' ),//(可选)'标签' =>__( '输入文本标签', 'theme_domain' ),//(可选)'说明' =>__( '输入文本描述', 'theme_domain' ),//(可选)'desc_tip' =>true,//(可选)将描述显示为提示//'数据类型' =>'',//(可选格式选项)可以是 'price'、'decimal'、'stock' 或 'url'//'类型' =>'',//(可选的附加自定义属性)//'值' =>$value,//(可选)为静态值(可以有条件地为 $value 变量设置)) );//2.Textarea输入框woocommerce_wp_textarea_input(数组('id' =>'_input_textarea',//'名称' =>'input_textarea',//(可选)用于与名称属性不同的 ID 属性'类' =>'widefat',//(可选)//'风格' =>''//(可选的)//'wrapper_class' =>'show_if_simple',//(可选)此处仅用于简单产品类型的示例'占位符' =>__( '输入一些数据', 'theme_domain' ),//(可选)'标签' =>__( '输入文本区域标签', 'theme_domain' ),'说明' =>__( '输入文本区域说明', 'theme_domain' ),'desc_tip' =>true,//(可选)将描述显示为提示//'行' =>2,//(可选)定义行数//'cols' =>20,//(可选)定义列数//'值' =>$value,//(可选)为静态值(可以有条件地为 $value 变量设置)) );//3. 复选框字段woocommerce_wp_checkbox(数组('id' =>'_input_checkbox',//'名称' =>'input_checkbox',//(可选)用于与名称属性不同的 ID 属性//'类' =>'some-class',//(可选)//'wrapper_class' =>'show_if_simple',//(可选)此处仅用于简单产品类型的示例'标签' =>__( '输入复选框标签', 'theme_domain' ),'说明' =>__( '输入复选框描述', 'theme_domain' ),'desc_tip' =>true,//(可选)将描述显示为提示//'cbvalue' =>'yes',//使其默认选中//'值' =>$value,//(可选)为静态值(可以有条件地为 $value 变量设置)) );//4. 单选按钮字段woocommerce_wp_radio(数组('id' =>'_input_radio',//'名称' =>'input_radio',//(可选)用于与名称属性不同的 ID 属性//'类' =>'some-class',//(可选)//'wrapper_class' =>'show_if_simple',//(可选)此处仅用于简单产品类型的示例'标签' =>__(' ', 'my_theme_domain'),'说明' =>__( '输入电台描述', 'my_theme_domain' ),'desc_tip' =>真的，'选项' =>大批('option_value_1' =>__('显示选项1'),'option_value_2' =>__('显示选项2'),'option_value_3' =>__('显示选项3'),),//'值' =>$value,//(可选)为静态值(可以有条件地为 $value 变量设置)) );//5. 选择字段woocommerce_wp_select(数组('id' =>'_select_field',//'名称' =>'_select_field',//(可选)用于与名称属性不同的 ID 属性//'wrapper_class' =>'show_if_simple',//(可选)此处仅用于简单产品类型的示例'标签' =>__(' ', 'my_theme_domain'),'说明' =>__( '输入电台描述', 'my_theme_domain' ),'desc_tip' =>真的，'选项' =>大批('' =>__('选择一个选项'),//默认空值'option_value_1' =>__('显示选项1'),'option_value_2' =>__('显示选项2'),'option_value_3' =>__('显示选项3')),//'值' =>$value,//(可选)为静态值(可以有条件地为 $value 变量设置)) );//6. 隐藏输入框woocommerce_wp_hidden_input(数组('id' =>'_hidden_input',//'名称' =>'_hidden_input',//(可选)用于与名称属性不同的 ID 属性'类' =>'some_class',//'值' =>$value,//(可选)为静态值(可以有条件地为 $value 变量设置)) );回声'</div>';}//步骤 3 - 保存自定义产品选项卡元框的自定义字段数据add_action('woocommerce_process_product_meta', 'shipping_costs_process_product_meta_fields_save');函数shipping_costs_process_product_meta_fields_save( $post_id ){//保存文本字段数据if( isset( $_POST['_input_text'] ) )update_post_meta( $post_id, '_input_text', esc_attr( $_POST['_input_text'] ) );//保存textarea字段数据if( isset( $_POST['_input_textarea'] ) )update_post_meta( $post_id, '_input_textarea', esc_attr( $_POST['_input_textarea'] ) );//保存复选框字段数据if( isset( $_POST['_input_checkbox'] ) )update_post_meta( $post_id, '_input_checkbox', esc_attr( $_POST['_input_checkbox'] ) );//保存单选按钮字段数据if( isset( $_POST['_input_radio'] ) )update_post_meta( $post_id, '_input_radio', esc_attr( $_POST['_input_radio'] ) );//保存选择器字段数据if( isset( $_POST['_select_field'] ) )update_post_meta( $post_id, '_select_field', esc_attr( $_POST['_select_field'] ) );//保存隐藏的输入数据if( isset( $_POST['_hidden_input'] ) )update_post_meta( $post_id, '_hidden_input', esc_attr( $_POST['_hidden_input'] ) );}这自然会出现在活动子主题(或主题)的 function.php 文件或任何插件文件中.
<块引用>您必须在第 2 步和第 3 步中使用相同的自定义字段 ID(slug 名称).
此代码经过测试且功能齐全
<块引用>您可以使用任何数据添加自定义选项，使用自定义代码、自定义变量或步骤 2 中的任何类型的函数.
<小时><块引用>
使用
要获取或检索数据，您将使用
<小时>
参考文献:
- 添加仅在 woocommerce 产品管理端可见的标签
- 打包 WooCommerce > 管理 > 功能
- WooCommerce 单产品字段多选
- WP 代码参考 - get_post_meta()
- WP 代码参考 - update_post_meta()
I want to programmatically add a settings tab to Product data metabox like this:
The "Verzendkosten" tab was added with firebug (which means "Shipping costs).
How would I programmatically add the "Verzendkosten" custom tab in woocommerce edit-product pages settings?
(and How would I be abled to populate it with data?)
解决方案
Updated on November 2017:
- Corrected some mistakes, cleaned and added available options
- Added 'Usage' and 'naming conventions' for custom fields slugs, at the end.
1) You create a custom tab in the custom post type Metabox (Here for "product"),
2) then you can add fields to populate this tab, with different kind of fields (You will find one of each type, so this is a very complete example).
And finally you will find a function that save the data when submitted.
Here it is what you will get visually (for the 6 different custom fields types):
Here is the related code:
// 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'] ) );
}
Naturally this goes on function.php file of your active child theme (or theme) or in any plugin file.
You have to use the same custom field ID (slug names) in Step 2 and 3.
This code is tested and fully functional
You can add custom options with ANY DATA, using custom code, custom variables, or any kind of functions in Step 2.
Usage
To get or retrieve the data you will use
get_post_meta()function for a defined Post ID:$custom_field_data = get_post_meta( $post_id, '_custom_field_slug', true );Where:
$post_idis the current post ID (from product, order, coupon… post-types).custom_field_slugis the ID (the slug) of your custom field.trueorfalse: Whether to return a single value (data string or arrays)It's the same process each kind of fields
Advice - Custom field slug names (Custom field ID)
If you don't use an underscore character (
_slug_name) at the beginning of the slug names of your custom fields, they will appear and be accessible to authorized users in the custom fields Metabox, after submitting the data (Update button).See this screen shot (here we get
input_textcustom field slug):
References:
- Add tab which is visible only in admin side of product in woocommerce
- Package WooCommerce > Admin > Functions
- WooCommerce Multi Select for Single Product Field
- WP Code Reference - get_post_meta()
- WP Code Reference - update_post_meta()
这篇关于以编程方式添加自定义设置选项卡以管理 WooCommerce 中的产品数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
