Handle WooCommerce Product Settings

Let me show the beautiful way of adding options to WooCommerce products.

/12 comments

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";
	}
	</style>';
}

The most related tut

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with WooCommerce?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Comments — 12

Leave a comment

php js HTML CSS Code