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

Hope you like this article, We will meet you again with a new topic. Also, visit our quality WooCommerce extensions

Happy Coding 🙂

Support

For any technical assistance kindly raise a ticket or reach us by email at [email protected]. Thanks for Your Time! Have a Good Day!

Also, discover various solutions to add more features and enhance your online store by visiting WooCommerce plugins.