在WooCommerce中以编程方式添加自定义设置选项卡以管理产品数据

是的

我想以编程方式将“设置”标签添加到“产品数据”元框,如下所示:

在此处输入图片说明

“ Verzendkosten”标签中添加了萤火虫 (表示“运费”)

如何在woocommerce编辑产品页面设置中以编程方式添加“ Verzendkosten”自定义标签?

(以及如何填充数据?)

LoicTheAztec

2017年11月更新:

  • 更正了一些错误,清除并添加了可用选项
  • 最后,为自定义字段段添加了“用法”“命名约定”

1)您在自定义帖子类型Metabox中创建了一个自定义标签(此处为“产品”),
2)然后您可以添加字段以填充此标签,其中包含不同类型的字段(您会找到每种类型中的一个,所以这是一个非常完整的示例)。

最后,您将找到一个在提交时保存数据的函数。

这是您将在视觉上获得的(对于6种不同的自定义字段类型):

自定义metabox产品标签

以下是相关代码:

// 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 (子名称)

此代码已经过测试并且功能齐全

您可以在第2步中使用自定义代码,自定义变量或任何类型的函数,将任何选项与ANY DATA一起添加


用法

要获取或检索数据,您将使用get_post_meta()函数来定义Post ID

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

在哪里:

  • $post_id 是当前的帖子ID(来自产品,订单,优惠券…帖子类型)。
  • custom_field_slug 是您的自定义字段的ID(子链)。
  • truefalse:是否返回单个值(数据字符串或数组)

每种领域都是相同的过程


建议-自定义字段段名(自定义字段ID)

如果您自定义字段子名称开头不使用下划线字符_slug_name,则在提交数据后(更新按钮),它们将在自定义字段Metabox中显示,并且可供授权用户访问

观看此屏幕快照(在这里我们获得了input_text自定义字段slug)

自定义字段元框


参考:

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在 Woocommerce 中为简单产品添加自定义设置选项卡

来自分类Dev

如何在 Woocommerce 的自定义产品类型中添加变体选项卡?

来自分类Dev

Woocommerce其他信息选项卡:添加产品自定义字段值

来自分类Dev

在WooCommerce中将“相关产品”添加到自定义选项卡

来自分类Dev

Woocommerce单一产品选项卡中的自定义字段

来自分类Dev

在WooCommerce 4中以编程方式从自定义产品类型添加新产品

来自分类Dev

nopcommerce 尝试在管理面板中添加自定义选项卡

来自分类Dev

以编程方式更新WooCommerce产品中设置的自定义属性值

来自分类Dev

如何以编程方式在WooCommerce中添加新的自定义产品属性?

来自分类Dev

在功能区中添加自定义选项卡

来自分类Dev

当woocommerce产品中不存在任何内容时,隐藏自定义选项卡

来自分类Dev

空时隐藏WooCommerce产品简短描述自定义选项卡

来自分类Dev

显示在附加信息选项卡中,一些产品设置自定义字段值

来自分类Dev

在常规单个产品页面的自定义选项卡中显示“相关产品”

来自分类Dev

为选项卡布局中的每个选项卡设置自定义视图时出错

来自分类Dev

drupal 8中的自定义模块,未在管理部分中创建选项卡

来自分类Dev

Magento-将自定义块添加到目录产品编辑视图中的现有选项卡

来自分类Dev

是否可以在“详细信息”选项卡中添加自定义字段

来自分类Dev

如何在UITabBarController中的选项卡上添加自定义手势

来自分类Dev

如何调用“自定义”选项卡中的“添加任务”操作以显示销售订单的任务?

来自分类Dev

WPF中的“自定义样式”选项卡

来自分类Dev

自定义JTabbedPane中的选项卡呈现顺序

来自分类Dev

如何自定义“数据链接属性”对话框中的“连接”选项卡?

来自分类Dev

在自定义嵌套选项卡中定位子选项卡

来自分类Dev

自定义不带插件的WooCommerce产品数据标签-WEIGHT

来自分类Dev

创建自定义选项卡

来自分类Dev

向WooCommerce产品变体选项中添加自定义复选框

来自分类Dev

是否可以在EPiServer管理面板的“创建/编辑用户”页面上添加自定义选项卡?

来自分类Dev

仅在WooCommerce中来自自定义类型的管理产品上添加字段

Related 相关文章

  1. 1

    在 Woocommerce 中为简单产品添加自定义设置选项卡

  2. 2

    如何在 Woocommerce 的自定义产品类型中添加变体选项卡?

  3. 3

    Woocommerce其他信息选项卡:添加产品自定义字段值

  4. 4

    在WooCommerce中将“相关产品”添加到自定义选项卡

  5. 5

    Woocommerce单一产品选项卡中的自定义字段

  6. 6

    在WooCommerce 4中以编程方式从自定义产品类型添加新产品

  7. 7

    nopcommerce 尝试在管理面板中添加自定义选项卡

  8. 8

    以编程方式更新WooCommerce产品中设置的自定义属性值

  9. 9

    如何以编程方式在WooCommerce中添加新的自定义产品属性?

  10. 10

    在功能区中添加自定义选项卡

  11. 11

    当woocommerce产品中不存在任何内容时,隐藏自定义选项卡

  12. 12

    空时隐藏WooCommerce产品简短描述自定义选项卡

  13. 13

    显示在附加信息选项卡中,一些产品设置自定义字段值

  14. 14

    在常规单个产品页面的自定义选项卡中显示“相关产品”

  15. 15

    为选项卡布局中的每个选项卡设置自定义视图时出错

  16. 16

    drupal 8中的自定义模块,未在管理部分中创建选项卡

  17. 17

    Magento-将自定义块添加到目录产品编辑视图中的现有选项卡

  18. 18

    是否可以在“详细信息”选项卡中添加自定义字段

  19. 19

    如何在UITabBarController中的选项卡上添加自定义手势

  20. 20

    如何调用“自定义”选项卡中的“添加任务”操作以显示销售订单的任务?

  21. 21

    WPF中的“自定义样式”选项卡

  22. 22

    自定义JTabbedPane中的选项卡呈现顺序

  23. 23

    如何自定义“数据链接属性”对话框中的“连接”选项卡?

  24. 24

    在自定义嵌套选项卡中定位子选项卡

  25. 25

    自定义不带插件的WooCommerce产品数据标签-WEIGHT

  26. 26

    创建自定义选项卡

  27. 27

    向WooCommerce产品变体选项中添加自定义复选框

  28. 28

    是否可以在EPiServer管理面板的“创建/编辑用户”页面上添加自定义选项卡?

  29. 29

    仅在WooCommerce中来自自定义类型的管理产品上添加字段

热门标签

归档