Adding Multiple Tabs to Woocommerce Single Product Pages

Adding multiple tabs for specific products to WooCommerce single product pages

$post_id is not passed to the woocommerce_product_tabs filter hook.

You can use global $product & $product->get_id() instead.

So you get:

function filter_woocommerce_product_tabs( $tabs ) {
    global $product;
    
    // Is a WC product
    if ( is_a( $product, 'WC_Product' ) ) {
        // Get product ID
        $product_id = $product->get_id();
    
        // Compare
        if ( in_array( $product_id, array( 8125, 30, 815 ) ) ) {
        
            $tabs['artwork_guidelines'] = array(
                'title'     => __( 'Artwork Guidelines', 'woocommerce' ),
                'priority'  => 50,
                'callback'  => 'artwork_product_tab_content'
            );
            
            $tabs['standard_sizes'] = array(
                'title'     => __( 'Standard Sizes', 'woocommerce' ),
                'priority'  => 60,
                'callback'  => 'standard_sizes_product_tab_content'
            );
        }
    }
    
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'filter_woocommerce_product_tabs', 100, 1 );

// New Tab contents
function artwork_product_tab_content() {
    echo '<p>artwork_product_tab_content</p>';
}
function standard_sizes_product_tab_content() {
    echo '<p>standard_sizes_product_tab_content</p>';
}

Adding multiple tabs to WooCommerce single product pages

As you are using 4 times the same hook woocommerce_product_tabs, your problem comes from the highest priority on the first one. Instead you should use it only one time, merging that 4 hooked functions in one.

Here is your functional tested code, changed a little bit:

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

    // 1) Removing tabs

    unset( $tabs['description'] );              // Remove the description tab
    // unset( $tabs['reviews'] );               // Remove the reviews tab
    unset( $tabs['additional_information'] );   // Remove the additional information tab

    // 2 Adding new tabs and set the right order

    //Attribute Description tab
    $tabs['attrib_desc_tab'] = array(
        'title'     => __( 'Desc', 'woocommerce' ),
        'priority'  => 100,
        'callback'  => 'woo_attrib_desc_tab_content'
    );

    // Adds the qty pricing  tab
    $tabs['qty_pricing_tab'] = array(
        'title'     => __( 'Quantity Pricing', 'woocommerce' ),
        'priority'  => 110,
        'callback'  => 'woo_qty_pricing_tab_content'
    );

    // Adds the other products tab
    $tabs['other_products_tab'] = array(
        'title'     => __( 'Other Products', 'woocommerce' ),
        'priority'  => 120,
        'callback'  => 'woo_other_products_tab_content'
    );

    return $tabs;

}

// New Tab contents

function woo_attrib_desc_tab_content() {
    // The attribute description tab content
    echo '<h2>Description</h2>';
    echo '<p>Custom description tab.</p>';
}
function woo_qty_pricing_tab_content() {
    // The qty pricing tab content
    echo '<h2>Quantity Pricing</h2>';
    echo '<p>Here\'s your quantity pricing tab.</p>';
}
function woo_other_products_tab_content() {
    // The other products tab content
    echo '<h2>Other Products</h2>';
    echo '<p>Here\'s your other products tab.</p>';
}

This code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Tested and works.

---

In the same hook, you can:

• Remove tabs
• Add tabs
• Reorder tabs

Related official documentation: Editing product data tabs

How to add several tabs in woocommerce?

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
    $tabs['desc_tab'] = array(
        'title'     => __( 'Additional Information', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_new_product_tab_content'
    );
}

Paste this code your active theme.

Adding custom tab to single product page for specific product type in WooCommerce

To find the error you can perform some extra checks and print the product type.
The else conditions can be removed after testing.

function filter_woocommerce_product_tabs( $tabs ) {
    // Get the global product object
    global $product;
    
    // Is a WC product
    if ( is_a( $product, 'WC_Product' ) ) {
        // Get type
        $product_type = $product->get_type();
        
        // Compare
        if ( $product_type == 'variable' ) {        
            $tabs['test_tab'] = array(
                'title'     => 'features',
                'priority'  => 50,
                'callback'  => 'woo_new_product_tab_content'
            );
        } else {
            echo 'DEBUG: ' . $product_type;
        }
    } else {
        echo 'NOT a WC product';
    }

    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'filter_woocommerce_product_tabs', 10, 1 );

// Callback
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>';
}

Move short description into tabs in Woocommerce single product pages

You still keep the following that change the tabs location (as you already do):

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 30 );

Then, the following will change the location of short description to a custom product tab:

// Remove short description
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

// Add short description to a custom product tab
add_filter( 'woocommerce_product_tabs', 'add_custom_product_tab', 10, 1 );
function add_custom_product_tab( $tabs ) {

    $custom_tab = array(
        'custom_tab' =>  array(
            'title' => __( "Short description", "woocommerce" ),
            'priority' => 12,
            'callback' => 'short_description_tab_content'
        )
    );
    return array_merge( $custom_tab, $tabs );
}

// Custom product tab content
function short_description_tab_content() {
    global $post, $product;

    $short_description = apply_filters( 'woocommerce_short_description', $post->post_excerpt );

    if ( ! $short_description ) {
        return;
    }

    echo '<div class="woocommerce-product-details__short-description">' . $short_description . '</div>'; // WPCS: XSS ok.
}

Code goes on function.php file of your active child theme (or active theme). Tested and works.

WooCommerce single product custom Tab displaying a page content

This is possible calling a classic WordPress post content for a defined post ID (page) this way:

//Add a new tab in single product pages
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
    $tabs['test_tab'] = array(
        'title'     => __( 'Seller Disclosure', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_new_product_tab_content'
    );
    return $tabs;
}

// The tab content (with the page content)
function woo_new_product_tab_content() {
    // ==> ==> ==> ==> ==> ==> ==> Replace the ID HERE by your page ID
    $page_id = 324;
    $page_post_object = get_post( $page_id );

    // Get the page content
    $page_content = $page_post_object->post_content;

    // (optionally Get the page title
    $page_title = $page_post_object->post_title;

    // The title (Or the page title)
    echo '<h2>Coming Soon</h2>'; // Or: echo '<h2>' . $page_title . '</h2>';

    // The page content
    echo '<div class="page-content-container">' . $page_content . '</div>';
}

Code goes in any php file of your active child theme (or theme) or also in any plugin php file.

This code Is tested and works.

---

Related Topics