Reading list Switch to dark mode

    WooCommerce Custom Tab Product Edit Page

    Updated 30 October 2017

    WooCommerce Custom Tab Product Edit Page – In this post we see how we can add custom tab to WooCommerce product edit option tab on product edit page at admin-end. This can be very useful when we want additional data with the product. Simply, we can add custom tab according to need and perform the intended task.

    WooCommerce provides various hooks for various tasks/actions to hook our own content with existing content as WordPress do. So, for this also we gonna use hook ‘woocommerce_product_data_tabs’ and add filter to this hook.

    Let’s start with some code –

    add_filter( 'woocommerce_product_data_tabs', 'wk_custom_product_tab', 10, 1 );

    In above line of code, we add filter to ‘woocommerce_product_data_tabs’ hook. Second parameter is the callback function for this filter, third is the priority, fourth-one is the number of accepted arguments in callback.

    Now,  add custom tab information in the callback of above filter –

    Searching for an experienced
    Woocommerce Company ?
    Find out More
    function wk_custom_product_tab( $default_tabs ) {
        $default_tabs['custom_tab'] = array(
            'label'   =>  __( 'Custom Tab', 'domain' ),
            'target'  =>  'wk_custom_tab_data',
            'priority' => 60,
            'class'   => array()
        return $default_tabs;

    In above function, we add custom tab information to default tabs array with ‘custom_tab’ id. The arguments in the above array are required as label defines the name of tab, target defines using which content will add to this tab, priority defines the position of this tab in the list of default tabs, class contains the html class if want to add any.

    Using above code, custom tab will add to product edit page. Now, to add content to this tab we’ll use one other hook ‘woocommerce_product_data_panels’ and add action to this hook –

    add_action( 'woocommerce_product_data_panels', 'wk_custom_tab_data' );
    function wk_custom_tab_data() {
       echo '<div id="wk_custom_tab_data" class="panel woocommerce_options_panel">// add content here</div>';

    In above code, id of div will be same as of target defined while creating tab.

    The custom tab on product edit page will look as shown in below screenshot –

    WooCommerce Custom Tab Product Edit Page



    Still have any issue feel free to add a ticket and let us know your views to make the code better

    Thanks for Your Time! Have a Good Day!

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


  • sachin sharma
  • Alex
    Hi, in this way I can’t write nothing inside panel of custom tab. I see only // add content here, but it’s nor clickable either writable.

    How can write content and display it on the front end?


  • Jakub Šafránek
    Thanks for this code. Unfortunatelly thats does not work, when I am using it. It displays an error for first row of this code. Where could be a problem? Thanks
    • Webkul Support
      Hi Jakub,
      Thanks for pointing it out. Actually, one end quote was missed which is updated now. You can try with updated code now. Thanks for your time.

      • razni
        how do you think I can make it display in list view instead?
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content