Adding multiple tabs to WooCommerce single product pages

5
votes

I am trying to add three custom tabs to WooCommerce. I have the code below and two of them show up but for some reason the attribute description tab does not show on the page. Not only that the Quantity pricing tab doesn't show its description. I have tried to move the different sections of code to different locations and I have checked the code for errors or missing sections. This is as close as I can get it.

My process is to basically remove the existing tabs that I don't want and then to add new ones in the order that I want them to appear.

I have a feeling that I am missing something.

You can see the site here: http://demo.bergdahl.com/product/6-oz-catridge/

Here's the code I am using:

// WooCommerce Tabs



// REMOVE EXISTING TABS

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );


function woo_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );          // Remove the description tab

    // unset( $tabs['reviews'] );           // Remove the reviews tab

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

    return $tabs;
}




// ADD ATTRIBUTE DESCRIPTION TAB

add_filter( 'woocommerce_product_tabs', 'woo_attrib_desc_tab' );

function woo_attrib_desc_tab( $tabs ) {

    // Adds the Attribute Description tab

    $tabs['attrib_desc_tab'] = array(

        'title'     => __( 'Desc', 'woocommerce' ),

        'priority'  => 100,

        'callback'  => 'woo_attrib_desc_tab_content'

    );

    return $tabs;

}


// ADD QUANTITY PRICING TAB

add_filter( 'woocommerce_product_tabs', 'woo_qty_pricing_tab' );

function woo_qty_pricing_tab( $tabs ) {

    // Adds the qty pricing  tab

    $tabs['qty_pricing_tab'] = array(

        'title'     => __( 'Quantity Pricing', 'woocommerce' ),

        'priority'  => 110,

        'callback'  => 'woo_qty_pricing_tab_content'

    );
    return $tabs;
}

// ADD OTHER PRODUCTS TAB

add_filter( 'woocommerce_product_tabs', 'woo_other_products_tab' );

function woo_other_products_tab( $tabs ) {

    // Adds the other products tab

    $tabs['other_products_tab'] = array(

        'title'     => __( 'Other Products', 'woocommerce' ),

        'priority'  => 120,

        'callback'  => 'woo_other_products_tab_content'

    );

    return $tabs;

}

// ADD CUSTOM TAB DESCRIPTIONS

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

}

Edit per reply from LoicTheAztec below, this is my entire functions.php file. I tried it with and without the ?> at the bottom: 

<?php
add_theme_support( 'builder-3.0' );

add_theme_support( 'builder-responsive' );



function register_my_fonts() {

    wp_register_style('googleFonts-OpenSans', '//fonts.googleapis.com/css?family=Open+Sans:400,300,700');

    wp_enqueue_style( 'googleFonts-OpenSans');

}



add_action('wp_enqueue_scripts', 'register_my_fonts');





function sc_replacecolon( $content ){ return str_replace( '[sc:', '[sc name=', $content ); }

add_filter( 'the_content', 'sc_replacecolon', 5 );



/* WOOCOMMERCE */

add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tabs', 100, 1 );
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

    //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>';
}
?>
3
phpwordpresstabswoocommerceproduct
"It broke the site" is 95% of the time a syntax error. You can get a more useful error description by enabling WP_DEBUG. – helgatheviking
I added Loic's code below to the top of my functions.php and get: Parse error: syntax error, unexpected 'add_filter' (T_STRING) in /home/parkymay/public_html/demo/wp-content/themes/BuilderChild-Default/functions.php on line 1 – MattM
The error says it is on line 1, which if I had to guess, indicates an issue with the parent theme's functions.php. I used your entire functions.php from above as a child theme of Twenty Sixteen and it doesn't produce any errors. – helgatheviking
Can you remove everything from the parent functions.php and then add it back 1 function at a time? – helgatheviking
helgatheviking, I figured out a work around. I added the code to a custom-functions.php file in the parent theme and removed all references to it in the child theme. The parent functions.php file already called for the custom file if it existed so it worked great! Thanks for your suggestions, they really helped tracking down the problems. – MattM

3 Answers

14
votes

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

0
votes

The only addition I made was to check whether content existed in a tab before adding it. I simply wrapped each new array with an 'if' statement.

if (!empty(get_the_content())) {
    $tabs['tab'] = array(
        'title'     => __( 'Tab Title', 'woocommerce' ),
        'priority'  => 100,
        'callback'  => 'woo_tab_content'
    );
}
0
votes
function my_simple_custom_product_tab( $tabs ) {

    $tabs['my_custom_tab'] = array(
        'title'    => __( 'Custom Tab', 'textdomain' ),
        'callback' => 'my_simple_custom_tab_content',
        'priority' => 50,
    );

    return $tabs;

}
add_filter( 'woocommerce_product_tabs', 'my_simple_custom_product_tab' );

/**
 * Function that displays output for the shipping tab.
 */
function my_simple_custom_tab_content( $slug, $tab ) {

    ?><h2><?php echo wp_kses_post( $tab['title'] ); ?></h2>
    <p>Tab Content</p><?php

}