Skip to content

Snippet: Add New Tab & Setting to WooCommerce Products

The snippet below is an example of how you could add custom settings to the default WooCommerce single product editor tabs. These settings will be stored in the post meta so you can easily access them on the front-end. It's a great way to extend your product functionality via a plugin or child theme.

// Add new product data tab
add_filter( 'woocommerce_product_data_tabs', function( $tabs ) {
	$tabs['cgifans'] = array(
		'label'    => __( 'Extra Settings', 'woocommerce' ),
		'target'   => 'my_extra_settings_tab', // same as the ID in the next function.
		'class'    => array(),
		'priority' => 99,
	);
	return $tabs;
}, 98 );

// Add new product data settings
add_filter( 'woocommerce_product_data_panels', function() {
	global $post;

	// Note the 'id' attribute needs to match the 'target' parameter set above
	?><div id='my_extra_settings_tab' class='panel woocommerce_options_panel'><div class='options_group'> '_my_new_setting_id',
				'label'       => __( 'Setting Name', 'text-domain' ),
				'desc_tip'    => 'true',
				'description' => __( 'Setting Description...', 'text-domain' ),
				'type'        => 'text',
			) );
		?></div>

	</div><?php
} );

// Save new product data settings
function save_cgifans_option_fields( $post_id ) {

	if ( isset( $_POST['_my_new_setting_id'] ) )  {
		update_post_meta( $post_id, '_my_new_setting_id', sanitize_text_field( $_POST['_my_new_setting_id'] ) );
	}

}
add_action( 'woocommerce_process_product_meta_simple', 'save_cgifans_option_fields'  );
add_action( 'woocommerce_process_product_meta_variable', 'save_cgifans_option_fields'  );
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top