CODEWITHSUNDEEP
wordpresstabswoocommerce
Sam Citron
Sam Citron

Reputation: 1

Adding bottom tab in product pages in woocommerce

WooCommerce has documentation on how to add a single extra tab at the bottom of the woocommerce product pages. The code is inserted into the functions.php and is editable.

I'm just wondering how to add a bunch more tabs into the functions.php without them clashing with each other. What is the code that I need to add for the 2nd and 3rd extra tab.

Here is the code from woocommerce for the first 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>';
	
}

Upvotes: 0

Views: 343

Answers (2)

trysmudford
trysmudford

Reputation: 588

Keep your initial function and just add duplicates of the second function, then add them into the $tabs array in the first function.

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'
    );

    $tabs['test_tab_two'] = array(
        'title'     => __( 'Another New Product Tab', 'woocommerce' ),
        'priority'  => 60,
        'callback'  => 'woo_new_product_tab_content_two'
    );

    $tabs['test_tab_three'] = array(
        'title'     => __( 'Yet Another New Product Tab', 'woocommerce' ),
        'priority'  => 70,
        'callback'  => 'woo_new_product_tab_content_three'
    );

    return $tabs;

}
function woo_new_product_tab_content() {
    echo '<h2>New Product Tab</h2>';
    echo '<p>Here\'s your new product tab.</p>';
}

function woo_new_product_tab_content_two() {
    echo '<h2>New Product Tab</h2>';
    echo '<p>Here\'s your new product tab.</p>';
}

function woo_new_product_tab_content_three() {
    echo '<h2>New Product Tab</h2>';
    echo '<p>Here\'s your new product tab.</p>';
}

Upvotes: 1

Mickey
Mickey

Reputation: 534

Here is the modified code --- 

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {

    // Adds the new tab

    $tabs['test_tab_one'] = array(
        'title'     => __( 'New Product Tab 1', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_new_product_tab_content_one'
    );

    $tabs['test_tab_two'] = array(
        'title'     => __( 'New Product Tab 2', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_new_product_tab_content_two'
    );


    return $tabs;

}
function woo_new_product_tab_content_one() {

    // The new tab content for 1

    echo '<h2>New Product Tab</h2>';
    echo '<p>Here\'s your new product tab.</p>';

}
function woo_new_product_tab_content_two() {

    // The new tab content for 2

    echo '<h2>New Product Tab</h2>';
    echo '<p>Here\'s your new product tab.</p>';

}

Upvotes: 1

Related Questions