Created
March 11, 2013 11:24
-
-
Save jameskoster/5133587 to your computer and use it in GitHub Desktop.
WooCommerce - Add new product tab
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>'; | |
} |
Hi, thanks for the tips, pls also advise how to hook a shortcode or html content in this new tab, thanks in advance!
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>';
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
Any idea how to make the tab content editable from the Products admin in the dashboard?