Ben Blanco
FREELANCE WEB DEVELOPER

Our company store, Horner APG, required additional tabs to be displayed on the woocommerce single product page. Below is the code we’re using to power our additional tabs. The code below will create an additional panel in your product editor. When enabled, via a checkbox, it will display the panel and it’s title on the front-end.

Future Enhancements:

1. Enable the HTML editor in the back-end for the custom panel.
2. Add user interface so users can add additional panels on per product basis.

I’m not the strongest coder so feel free to take the code below and expand on it. Please share with the rest of the community how you made it better. Cheers!

<?php

/**
 * Custom Tabs for Product display
 * 
 * Outputs an extra tab to the default set of info tabs on the single product page.
 */
function custom_tab_options_tab() {
?>
	<li class="custom_tab"><a href="#custom_tab_data"><?php _e('Custom Tab', 'woothemes'); ?></a></li>
<?php
}
add_action('woocommerce_product_write_panel_tabs', 'custom_tab_options_tab'); 


/**
 * Custom Tab Options
 * 
 * Provides the input fields and add/remove buttons for custom tabs on the single product page.
 */
function custom_tab_options() {
	global $post;
	
	$custom_tab_options = array(
		'title' => get_post_meta($post->ID, 'custom_tab_title', true),
		'content' => get_post_meta($post->ID, 'custom_tab_content', true),
	);
	
?>
	<div id="custom_tab_data" class="panel woocommerce_options_panel">
		<div class="options_group">
			<p class="form-field">
				<?php woocommerce_wp_checkbox( array( 'id' => 'custom_tab_enabled', 'label' => __('Enable Custom Tab?', 'woothemes'), 'description' => __('Enable this option to enable the custom tab on the frontend.', 'woothemes') ) ); ?>
			</p>
		</div>
		
		<div class="options_group custom_tab_options">                								
			<p class="form-field">
				<label><?php _e('Custom Tab Title:', 'woothemes'); ?></label>
				<input type="text" size="5" name="custom_tab_title" value="<?php echo @$custom_tab_options['title']; ?>" placeholder="<?php _e('Enter your custom tab title', 'woothemes'); ?>" />
			</p>
			
			<p class="form-field">
				<?php _e('Custom Tab Content:', 'woothemes'); ?>
           	</p>
			
			<table class="form-table">
				<tr>
					<td>
						<textarea class="theEditor" rows="10" cols="40" name="custom_tab_content" placeholder="<?php _e('Enter your custom tab content', 'woothemes'); ?>"><?php echo @$custom_tab_options['content']; ?></textarea>
					</td>
				</tr>   
			</table>
        </div>	
	</div>
<?php
}
add_action('woocommerce_product_write_panels', 'custom_tab_options');


/**
 * Process meta
 * 
 * Processes the custom tab options when a post is saved
 */
function process_product_meta_custom_tab( $post_id ) {
	update_post_meta( $post_id, 'custom_tab_enabled', ( isset($_POST['custom_tab_enabled']) && $_POST['custom_tab_enabled'] ) ? 'yes' : 'no' );
	update_post_meta( $post_id, 'custom_tab_title', $_POST['custom_tab_title']);
	update_post_meta( $post_id, 'custom_tab_content', $_POST['custom_tab_content']);
}
add_action('woocommerce_process_product_meta', 'process_product_meta_custom_tab');


/** Add extra tabs to front end product page **/
if (!function_exists('woocommerce_product_custom_tab')) {
	function woocommerce_product_custom_tab() {
		global $post;
		
		$custom_tab_options = array(
			'enabled' => get_post_meta($post->ID, 'custom_tab_enabled', true),
			'title' => get_post_meta($post->ID, 'custom_tab_title', true),
		);
		
		if ( $custom_tab_options['enabled'] != 'yes' )
			return false;
		
?>
		<li><a href="#tab-models"><?php echo $custom_tab_options['title']; ?></a></li>
<?php
	}
}
add_action( 'woocommerce_product_tabs', 'woocommerce_product_custom_tab', 11 );


if (!function_exists('woocommerce_product_custom_panel')) {
	function woocommerce_product_custom_panel() {
		global $post;
		
		$custom_tab_options = array(
			'title' => get_post_meta($post->ID, 'custom_tab_title', true),
			'content' => get_post_meta($post->ID, 'custom_tab_content', true),
		);
		
?>
		<div class="panel" id="tab-models">			
			<?php echo $custom_tab_options['content']; ?>
		</div>
<?php
	}
}
add_action( 'woocommerce_product_tab_panels', 'woocommerce_product_custom_panel', 11 );

?>

If you enjoyed this post shoot me back a link or even better donate $10 to the
Navy SEAL Foundation. Cheers!