How to add custom product panel tabs in Woocommerce admin panel

In a previous post, i show you How to remove product panel tabs from admin panel in woocommerce. Here i want to go on How to add custom product panel tabs in Woocommerce admin panel. So let’s have a look.

So First, You will Go to admin panel of your site and click on products menu link. From here click on any product to edit it or create a new product by clicking on Add New button.

You will show Product panel tab: General, Inventory,shpping etc. So here i show you add custom product panel tabs in Woocommerce admin panel. Here i will add “My Custom Field” tab in product panel tab.

So here is my code. Add below line of code at the end of your theme’s functions.php file of your active child theme (or theme) and Save the file. This will add “My Custom Field” Tab in product panel.

add_filter( 'woocommerce_product_data_tabs', 'wdo_add_my_custom_field' ); 
function wdo_add_my_custom_field( $tabs ) {
 $tabs['my-custom-field'] = array( 'label' => __( 'My Custom Field', 'woocommerce' ), 
 'target' => 'my_custom_field', 
 'class' => array( 'show_if_simple' ), ); 
 return $tabs; }

If you want to add custom field under “My Custom Field” tab in product panel tab than Add below line of code at the end of your theme’s functions.php file of your active child theme (or theme) and Save the file.

add_action('woocommerce_product_data_panels', 'wdo_custom_product_data_fields');
function wdo_custom_product_data_fields() {
    global $post;
    // Note the 'id' attribute needs to match the 'target' parameter set above
    ?> 
  
  '_text_field',
      'label' => __( 'Custom Text Field', 'woocommerce' ),
      'wrapper_class' => 'show_if_simple', //show_if_simple or show_if_variable
      'placeholder' => 'Custom text field',
      'desc_tip' => 'true',
      'description' => __( 'Enter the text here.', 'woocommerce' )
    )
  );

  // Number Field
  woocommerce_wp_text_input(
    array(
      'id' => '_number_field',
      'label' => __( 'Custom Number Field', 'woocommerce' ),
      'placeholder' => '',
      'description' => __( 'Enter the value here.', 'woocommerce' ),
      'type' => 'number',
      'custom_attributes' => array(
         'step' => 'any',
         'min' => '15'
      )
    )
  );

  // Checkbox
  woocommerce_wp_checkbox(
    array(
      'id' => '_checkbox',
      'label' => __('Custom Checkbox Field', 'woocommerce' ),
      'description' => __( 'I’ve read and accept the terms & conditions', 'woocommerce' )
    )
  );

  // Select
  woocommerce_wp_select(
    array(
      'id' => '_select',
      'label' => __( 'Custom Select Field', 'woocommerce' ),
      'options' => array(
         'one' => __( 'Option 1', 'woocommerce' ),
         'two' => __( 'Option 2', 'woocommerce' ),
        'three' => __( 'Option 3', 'woocommerce' )
      )
    )
  );
 ?> 
    
If you want to change the position of "My Custom Field" product tab in admin panel than you will go with that How to change position of custom product panel tabs in Woocommerce admin panel.