Handle WooCommerce Product Settings

I understand that if you already read my metabox tutorial and use my metabox plugin (or maybe another plugin – doesn’t matter), you’re a master of meta boxes πŸ’ͺ and you can easily create your custom one for CPT WooCommerce product. But I would like to talk about more seamless integration – hooking the default WooCommerce Product Data metabox with tabs.

WooCommerce default Product Data meta box
Do you agree with me, that it is much better to add options into this metabox than creating another one?

By the way, if you want to remove Virtual and/or Downloadable checkboxes here, take a look at this tutorial.

How to add some fields to any of the default tabs of Product data metabox

β€œThere is a hook for that!”

Actually there are hooks for each tab, which allows you to add any custom content after the default option fields.

Action hooks

General tab

Here are 3 action hooks for each option group!

If you want to create you own option group below, use woocommerce_product_options_general_product_data, simple example:

add_action( 'woocommerce_product_options_general_product_data', 'misha_option_group' );
function misha_option_group() {
	echo '<div class="option_group">test</div>';

Note, that if you use one of the other 3 hooks, your fields shouldn’t be wrapped into <div class="option_group"> element.

Inventory tab

Or add your custom groups with woocommerce_product_options_inventory_product_data.

Shipping tab

Here is no hook for your custom options group 😱 but if you absolutely need it, you can do some tricks with the second hook and closing </div> element.

Linked products tab

Just one hook is here – woocommerce_product_options_related.

Advanced tab

Two hooks are here – woocommerce_product_options_reviews for the reviews option group and woocommerce_product_options_advanced for those who want to create an own option group.

Let’s add some options now!

The code is below but here are some notes about it:

add_action( 'woocommerce_product_options_advanced', 'misha_adv_product_options');
function misha_adv_product_options(){
	echo '<div class="options_group">';
	woocommerce_wp_checkbox( array(
		'id'      => 'super_product',
		'value'   => get_post_meta( get_the_ID(), 'super_product', true ),
		'label'   => 'This is a super product',
		'desc_tip' => true,
		'description' => 'If it is not a regular WooCommerce product',
	) );
	echo '</div>';
add_action( 'woocommerce_process_product_meta', 'misha_save_fields', 10, 2 );
function misha_save_fields( $id, $post ){
	//if( !empty( $_POST['super_product'] ) ) {
		update_post_meta( $id, 'super_product', $_POST['super_product'] );
	//} else {
	//	delete_post_meta( $id, 'super_product' );

Result of inserting the above code somewhere in functions.php, custom plugin etc.

WooCommerce custom product option under the advanced tab.
As you can see on the screenshot, description is displayed as a tip, but it could be displayed nearby with desc_tip parameter set to false (or not set at all).

How to add your custom tab with options

Before just copying the code below, please read this:

 * Tab
add_filter('woocommerce_product_data_tabs', 'misha_product_settings_tabs' );
function misha_product_settings_tabs( $tabs ){
	//unset( $tabs['inventory'] );
	$tabs['misha'] = array(
		'label'    => 'Misha',
		'target'   => 'misha_product_data',
		'class'    => array('show_if_virtual'),
		'priority' => 21,
	return $tabs;
 * Tab content
add_action( 'woocommerce_product_data_panels', 'misha_product_panels' );
function misha_product_panels(){
	echo '<div id="misha_product_data" class="panel woocommerce_options_panel hidden">';
	woocommerce_wp_text_input( array(
		'id'                => 'misha_plugin_version',
		'value'             => get_post_meta( get_the_ID(), 'misha_plugin_version', true ),
		'label'             => 'Plugin version',
		'description'       => 'Description when desc_tip param is not true'
	) );
	woocommerce_wp_textarea_input( array(
		'id'          => 'misha_changelog',
		'value'       => get_post_meta( get_the_ID(), 'misha_changelog', true ),
		'label'       => 'Changelog',
		'desc_tip'    => true,
		'description' => 'Prove the plugin changelog here',
	) );
	woocommerce_wp_select( array(
		'id'          => 'misha_ext',
		'value'       => get_post_meta( get_the_ID(), 'misha_ext', true ),
		'wrapper_class' => 'show_if_downloadable',
		'label'       => 'File extension',
		'options'     => array( '' => 'Please select', 'zip' => 'Zip', 'gzip' => 'Gzip'),
	) );
	echo '</div>';
 * Save
add_action('woocommerce_process_product_meta', 'bla_bla_bla' ...

The result on the screenshot.

Example of a custom tab with options in the WooCommerce product data metabox.

Do you see a custom icon and do not know how I did it? 😁 Some custom CSS and that’s all. I even used the default WordPress icon set, already connected to the admin area – Dashicons.

So, just go to their website β†’ Select an icon β†’ Click the Copy CSS button, paste it in admin area any way you like.

add_action('admin_head', 'misha_css_icon');
function misha_css_icon(){
	echo '<style>
	#woocommerce-product-data ul.wc-tabs li.misha_options.misha_tab a:before{
		content: "\f487";

The most related tut

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter