How to add Custom Product Data tabs in WooCommerce

Today, We will learn about how to add custom data tabs in WooCommerce products Add/ Edit. When we need more product information, this can be really helpful.

In short, we can construct a custom tab to perform the desired activity. As currently WooCommerce provides the following tabs as mentioned below.

General
Inventory
Shipping
Linked Products
Attributes
Advanced
Get More Options

When you create a Variation product the Variation tab is also provided by WooCoomerce.

If you require expert assistance or want to develop custom unique functionality, hire WooCommerce Developers for your project.

However, you need to add some custom tabs for your custom use so you can easily achieve this by writing some lines of code as WooCommerce provides some hooks for the same. Below we will go through that step by step with code examples.

/**
 * Product Add/Edit custom tabs
 *
 * @param array $default_tabs tabs.
 *
 * @return array $default_tabs
 */
function wk_product_edit_tab( $default_tabs ) {

	global $post;

	$tabs = array(
		'wk_custom_tab' => array(
			'label'       => esc_html__( 'Custom Data', 'wk-webkul' ),
			'target'      => 'wk_custom_tab', // ID of tab field
			'priority'    => 60,
			'class'       => array(),
		),
	);

	$default_tabs = array_merge( $default_tabs, $tabs );

	return $default_tabs;
}
add_filter( 'woocommerce_product_data_tabs', 'wk_product_edit_tab', 10, 1 );

The “woocommerce_product_data_tabs” filter is used to add a tab heading. Output below.

Now we need to add a tab field where we can add an input field as per the requirement.

/**
 * Product Add/Edit custom tab field
 *
 * @return void
 */
function wk_product_tab_field() {
	global $woocommerce, $post;

	?>
	<div id="wk_custom_tab" class="panel woocommerce_options_panel">
		<p class="form-field">
			<?php $custom_data = get_post_meta( $post->ID, '_wk_custom_data', true );	?>
			<label for="wk-custom-data"><?php esc_html_e( 'Custom Data', 'wkc-customization' ); ?></label>
			<input type="text" name="_wk_custom_data" id="wk-custom-data" value="<?php echo $custom_data; ?>" />
		</p>
	</div>
	<?php
}
add_action( 'woocommerce_product_data_panels', 'wk_product_tab_field' );

Here is the output–

Now we will see how we can save this custom data with the product.

/**
 * Save custom data
 *
 * @return boolean
 */
function wk_save_custom_tab_data( $post_id, $post, $update ) {

	global $post;

	if ( isset( $_POST['_wk_custom_data'] ) ) {
		update_post_meta( $post->ID, '_wk_custom_data', esc_attr( $_POST['_wk_custom_data'] ) );
	}
}
add_action( 'save_post', 'wk_save_custom_tab_data', 10, 3 );

Now we can use this data anywhere as per our needs. I am displaying it on the product page.

add_action( 'woocommerce_after_add_to_cart_button', function () {

	global $post;

	echo '<p>' . get_post_meta( $post->ID, '_wk_custom_data', true ) . '</p>';

});

Output here