WooCommerce showing product variation data in tab disables other tab content

Question

So I am trying to display the length, width, and height of a WooCommerce variation in a tab. Everything is going well but it disables the other tabs. Essentially, they return with no content.

// Update descriptions tab
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {
$tabs['description']['callback'] = 'woo_custom_description_tab_content';    // Custom description callback
return $tabs;
}
function woo_custom_description_tab_content() {

global $product;

$available_variations = $product->get_available_variations();

$variation_id=$available_variations[0]['variation_id']; // Variation ID for first variation

$variable_product1 = new WC_Product_Variation( $variation_id );

echo '<strong>Product Box Dimensions</strong>';
if($variable_product1 ->get_length() != ''){
   echo '<div class="dimensions">Length: ' . $variable_product1 ->get_length() . ' ' . get_option( 'woocommerce_dimension_unit' ); 
}

if($variable_product1 ->get_width() != ''){
   echo '<div class="dimensions">Width: ' . $variable_product1 ->get_width() . ' ' . get_option( 'woocommerce_dimension_unit' ); 
}

if($variable_product1 ->get_height() != ''){
echo '<div class="dimensions">Height: ' . $variable_product1 ->get_height() . ' ' . get_option( 'woocommerce_dimension_unit' ); 
}


}

Sarathlal N Sarathlal N · Accepted Answer · 2018-05-30T14:54:12

There is some errors in your code.

Before fetching variations, please confirm that the product is a variable product.
Your callback function is for product description tab. So it will ruin default content in the description tab.

Here is an updated code.

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


function woo_custom_description_tab( $tabs ) {

    $tabs['description']['callback'] = 'woo_custom_description_tab_content';    // Custom description callback
    return $tabs;

}

function woo_custom_description_tab_content() {

    global $product;

    if ( $product->is_type( 'variable' ) ) {  // Before fetching variables, confirm that it is a variable product.

        $available_variations = $product->get_available_variations();

        $variation_id=$available_variations[0]['variation_id']; // Variation ID for first variation

        $variable_product1 = new WC_Product_Variation( $variation_id );

        echo '<strong>Product Box Dimensions</strong>';

        if($variable_product1 ->get_length() != ''){
           echo '<div class="dimensions">Length: ' . $variable_product1 ->get_length() . ' ' . get_option( 'woocommerce_dimension_unit' ); 
        }

        if($variable_product1 ->get_width() != ''){
           echo '<div class="dimensions">Width: ' . $variable_product1 ->get_width() . ' ' . get_option( 'woocommerce_dimension_unit' ); 
        }

        if($variable_product1 ->get_height() != ''){
            echo '<div class="dimensions">Height: ' . $variable_product1 ->get_height() . ' ' . get_option( 'woocommerce_dimension_unit' ); 
        }

    }

}

To add a new custom tab, use below snippets & update the code.

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

}

More tweaks on product tabs are available in WooCommerce Doc Page.

https://docs.woocommerce.com/document/editing-product-data-tabs/

WooCommerce showing product variation data in tab disables other tab content

1 Answers