Add Custom Product Data Tab

WooCommerce – Add Custom Product Data Tab – In this blog we will see how we can add custom product tab to WooCommerce product edit option tab on product edit page at admin-panel.

This is very useful when we want additional data with the product or need to add some extra fields to product tabs. Simply, we can add custom tab according to need and perform the intended task.

Products tabs on admin page comes with a filter –

<?php
add_filter( 'woocommerce_product_data_tabs', 'my_custom_product_tab', 10, 1 );
?>

function of this filter written in this plugin file –

/woocommerce/includes/admin/meta-boxes/class-wc-meta-box-product-data.php

This filter includes –

$tabs = apply_filters(
    'woocommerce_product_data_tabs',
    array(
        'general'        => array(
            'label'    => __( 'General', 'woocommerce' ),
            'target'   => 'general_product_data',
            'class'    => array( 'hide_if_grouped' ),
            'priority' => 10,
        ),
        'inventory'      => array(
            'label'    => __( 'Inventory', 'woocommerce' ),
            'target'   => 'inventory_product_data',
            'class'    => array( 'show_if_simple', 'show_if_variable', 'show_if_grouped', 'show_if_external' ),
            'priority' => 20,
        ),
        'shipping'       => array(
            'label'    => __( 'Shipping', 'woocommerce' ),
            'target'   => 'shipping_product_data',
            'class'    => array( 'hide_if_virtual', 'hide_if_grouped', 'hide_if_external' ),
            'priority' => 30,
        ),
        'linked_product' => array(
            'label'    => __( 'Linked Products', 'woocommerce' ),
            'target'   => 'linked_product_data',
            'class'    => array(),
            'priority' => 40,
        ),
        'attribute'      => array(
            'label'    => __( 'Attributes', 'woocommerce' ),
            'target'   => 'product_attributes',
            'class'    => array(),
            'priority' => 50,
        ),
        'variations'     => array(
            'label'    => __( 'Variations', 'woocommerce' ),
            'target'   => 'variable_product_options',
            'class'    => array( 'show_if_variable' ),
            'priority' => 60,
        ),
        'advanced'       => array(
            'label'    => __( 'Advanced', 'woocommerce' ),
            'target'   => 'advanced_product_data',
            'class'    => array(),
            'priority' => 70,
        ),
    )
);

Now we will see how we can add our custom product tab – ( left side of the tabs)

function my_custom_product_tab( $default_tabs ) {
    $default_tabs['custom_tab'] = array(
        'label'   =>  __( 'Custom Tab', 'domain' ),
        'target'  =>  'my_custom_tab_data',
        'priority' => 60,
        'class'   => array()
    );
    return $default_tabs;
}

Now the second phase .  we need to add a panel box where the data of this product tab need to show

<?php

add_action( 'woocommerce_product_data_panels', 'my_custom_tab_data' );

function my_custom_tab_data() {
   echo '<div id="my_custom_tab_data" class="panel woocommerce_options_panel">// add content here</div>';
}

it will look like this in product page

Reference http://hookr.io/filters/woocommerce_product_data_tabs/