| by bindevmin | No comments

Adding new tab to WooCommerce Product Data Panel

Adding new tab to WooCommerce Product Data panel is simple. First, you need to add the tab item. The name of the hook is:

woocommerce_product_write_panel_tabs

So, the add_action would be:

add_action( 'woocommerce_product_write_panel_tabs', 'wc_custom_tab_head' );

And the function wc_custom_tab_head is responsible for outputting the tab’s head HTML

Here is an implementation of wc_custom_tab_head

function wc_custom_tab_head()
{
    echo '<li class="product_tabs_tab"><a href="#woocommerce-custom-tab">Custom tab</a></li>';
}

Adding content to the tab

We have successfully add the tab, however, the tab is still blank. How to add content to that tab?

To add content to the Product Data panel, you’ll need to use the following hook:

woocommerce_product_data_panels

The add_action would be:

add_action( 'woocommerce_product_data_panels', 'wc_custom_tab_content' );

The implementation of wc_custom_tab_content could be:

function wc_tab_manager_product_tabs_panel_content() {

    ?>
    <div id="woo-custom-tab" class="panel wc-metaboxes-wrapper">
        <div class="woocommerce_product_tabs wc-metaboxes">
            <!-- Tab content -->
            <h1>hello</h1>
            <!-- End tab content -->
        </div>
    </div>
<?php 
}

Leave a Reply