Skip to content

Instantly share code, notes, and snippets.

@jameskoster
Created March 11, 2013 11:24
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jameskoster/5133587 to your computer and use it in GitHub Desktop.
Save jameskoster/5133587 to your computer and use it in GitHub Desktop.
WooCommerce - Add new product tab
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['test_tab'] = array(
'title' => __( 'New Product Tab', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
function woo_new_product_tab_content() {
// The new tab content
echo '<h2>New Product Tab</h2>';
echo '<p>Here\'s your new product tab.</p>';
}
@bowersdesign
Copy link

Any idea how to make the tab content editable from the Products admin in the dashboard?

@hangchen87
Copy link

Hi, thanks for the tips, pls also advise how to hook a shortcode or html content in this new tab, thanks in advance!

@ahmedofali
Copy link

This Example of How to add html content in the new tab add this in the callback function

echo '<div class="options_group">';
woocommerce_wp_select( array(
    'id' => '_product_style',
    'label' => esc_html__( 'Product Style', 'theme_name' ),
    'options' => array(
        ''          => esc_html__( 'Default', 'theme_name' ),
        'style-1'   => esc_html__( 'Style 1', 'theme_name' ),
        'style-2'   => esc_html__( 'Style 2', 'theme_name' )
    ),
    'desc_tip' => true,
    'description' => esc_html__( 'Select product style to display on product page.', 'theme_name' )
) );
echo '</div>';
echo '<div class="options_group">';
woocommerce_wp_text_input( array(
    'id'                => 'driver',
    'label'             => esc_html__( 'Driver, 'theme_name' ),
    'desc_tip'          => true,
    'description'       => esc_html__( 'Set Driver', 'theme_name' )
) );
echo '</div>';

@ahmedofali
Copy link

Another Useful Example:

class Woo_Product_Tabs{

	public static function init() {
		add_action( 'woocommerce_product_write_panel_tabs',array( 'Woo_Product_Tabs', 'add_product_delivery_panel_tab' ) );
		add_action( 'woocommerce_product_data_panels',array( 'Woo_Product_Tabs', 'add_product_delivery_panel_data' ) );
	}


	public static function add_product_delivery_panel_tab() {
		?>
        <li class="delivery_options delivery_tab">
            <a href="#delivery_product_data"><?php echo esc_html__( 'Delivery', 'theme_name' ); ?></a>
        </li>
		<?php
	}

	public static function add_product_delivery_panel_data() {
		global $post;
		?>
        <div id="delivery_product_data" class="panel woocommerce_options_panel">
            <div class="options_group">
				<?php
				$info = get_post_meta( $post->ID, 'info', true );
				wp_editor( htmlspecialchars_decode( $info ), 'info', array() );
				?>
            </div>
        </div>
		<?php
	}

}

Woo_Product_Tabs::init();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment