Pawan Kumawat

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,
        ),
    )
);

 

To add a custom product data tab in WooCommerce, you can use the woocommerce_product_data_tabs filter along with the woocommerce_product_data_panels action. Here’s an example of how you can implement this:

// Add custom product data tab
function add_custom_product_data_tab($tabs) {
    $tabs['custom_tab'] = array(
        'label'    => __('Custom Tab', 'your-text-domain'),
        'target'   => 'custom_product_data',
        'class'    => array('show_if_simple', 'show_if_variable'),
    );
    return $tabs;
}
add_filter('woocommerce_product_data_tabs', 'add_custom_product_data_tab');

 

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

// Add custom product data panel
function add_custom_product_data_panel() {
    global $post;
    ?>
    <div id="custom_product_data" class="panel woocommerce_options_panel">
        <?php // Add your custom fields here ?>
    </div>
    <?php
}
add_action('woocommerce_product_data_panels', 'add_custom_product_data_panel');

 

it will look like this in product page

 

 

In this example, we’re adding a custom product data tab called “Custom Tab” and a corresponding panel with the ID “custom_product_data”. You can modify the label, ID, and classes according to your requirements.

To add your custom fields or content inside the panel, you can place them within the <div id="custom_product_data" class="panel woocommerce_options_panel"> tags.

Remember to replace 'your-text-domain' with your actual text domain for translation purposes if needed.

By using this code, you’ll have a new custom tab in the WooCommerce product editor, where you can add your own fields or content to collect or display additional product information.

You can place this code in your theme’s functions.php file or in a custom plugin. Once added, go to the product editor in the WooCommerce admin area to see the new custom tab and panel.

Categories

Related Blogs

Upload Any File in My Account Registration Form

To allow users to upload a file in the My Account registration form in WooCommerce, you’ll need to customize the registration form and add a file upload field. We’ll use a custom function and a hook to achieve this. Here’s a step-by-step guide:

Calculate distance between 2 address using latitude and longitude

To calculate the distance between two locations using their latitude and longitude coordinates, you can use the Haversine formula. The Haversine formula is commonly used to calculate the great-circle distance between two points on the surface of a sphere (such as the Earth) given their latitude and longitude.

Cron Job WordPress (WP-Cron)

What Is Wordpress Cron Job? Wordpress Cron Job is how WordPress handles scheduling time-based tasks in WordPress.“Cron” Means the cron time-based task scheduling system which is available on UNIX systems.

Fetch WordPress Categories

Fetch wordpress categories Using inbuilt functions like get_categories(), wp_list_categories(), wp_dropdown_categories().