Pawan Kumawat

Request A Quote

Pawan Kumawat

Request A Quote

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

WooCommerce: Check if Product Category is in the Cart

To check if a specific product category is in the cart during the `woocommerce_before_cart` action hook, you can use a similar approach as in the previous answer. However, in this case, you need to use the `woocommerce_before_cart_contents` action hook, which fires before the cart items are displayed on the cart page. Here’s how you can achieve this:

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:

WooCommerce: Add A New Checkout Field.

To add a new checkout field in WooCommerce, you can use the `woocommerce_after_order_notes` action hook to display the new field on the checkout page. Additionally, you’ll need to use the `woocommerce_checkout_process` and `woocommerce_checkout_update_order_meta` filter hooks to handle the validation and saving of the field data.

Copyright © 2024 Pawan Kumawat