Merge Description and additional information tab i

Question

I am trying to merge the additional information tab with the description tab in woo commerce.

Basically the intention is to display information from both tabs side by side in possibly a 2 column layout where the first column displays the description and the second column the additional information.

Can this be achieved with a piece of code that can be placed in functions.php.

Thanks

Answer 1

Here is the way to make it (code is well commented):

// Manipulating product tabs
add_filter('woocommerce_product_tabs', 'change_product_tab', 98);
function change_product_tab($tabs){
    global $product;

    // Save the tabs to keep
    $reviews = $tabs['reviews'];

    // Remove tabs
    unset($tabs['description']);
    unset($tabs['additional_information']);
    unset($tabs['reviews']);

    // Add a new tab
    $tabs['other_details'] = array(
        'title'     => __( 'Details', 'woocommerce' ),
        'priority'  => 10,
        'callback'  => 'other_details_tab_content'
    );

    // Set the good priority to existing "reviews" tab
    $reviews['priority'] = 20;

    // Add back "reviews" tab
    $tabs['reviews'] = $reviews;

    return $tabs;
}

// Tab content (two columns)
function other_details_tab_content() {
    global $product;

    $heading = esc_html( apply_filters( 'woocommerce_product_description_heading', __( 'Description', 'woocommerce' ) ) );
    $heading2 = esc_html( apply_filters( 'woocommerce_product_additional_information_heading', __( 'Additional information', 'woocommerce' ) ) );

    ?>
    <!-- Temporary styles (to be removed and inserted in the theme styles.css file) -->
    <style>
        .single-product .half-col{float:left; width:48%;}
        .single-product .half-col.first{margin-right:4%;}
        .single-product .half-col > h3{font-size:1.3em;}
    </style>

    <h2><?php _e("Product details", "woocommerce"); ?></h2>

    <!-- 1. Product description -->

    <div class="half-col first">

    <?php if ( $heading ) : ?>
      <h3><?php echo $heading; ?></h3>
    <?php endif; ?>

    <?php the_content(); ?>

    </div>

    <!-- 2. Product Additional information -->

    <div class="half-col last">

    <?php if ( $heading2 ) : ?>
    <h3><?php echo $heading2; ?></h3>
    <?php endif; ?>

    <?php do_action( 'woocommerce_product_additional_information', $product ); ?>

    </div>
    <?php
}

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

Answer 2

I ended up taking a slightly different approach, basically just disabled the Additional Details tab and re-adding the content to the_content of the product (that is, the normal Description tab).

// Remove Additional Info tab
add_filter('woocommerce_product_tabs', 'remove_tab_additional_info', 30);
function remove_tab_additional_info($tabs){
    unset( $tabs['additional_information'] );
    return $tabs;
}

// Add original Additional Info tab info to the end of the_content
add_filter('the_content','add_details_to_content', 10, 1);
function add_details_to_content($content){
    if ( is_product() ){
        global $product;
        $content = '<div class="product-description">'.$content.'</div>';

        ob_start();
        ?><div class="product-additional-info"><?php

        $heading = apply_filters( 'woocommerce_product_additional_information_heading', __( 'Additional information', 'woocommerce' ) );
        if ( !empty($heading) ) {
        ?>
            <h3><?php echo esc_html( $heading ); ?></h3>
        <?php }

        do_action( 'woocommerce_product_additional_information', $product );
        ?></div><?php
        $content .= ob_get_clean();
    }
    return $content;
}

Answer 3

Here is another option if you want the data in the tabs to be displayed sequentially instead of in two column format as answered above by LoicTheAztec. Below is the code drawing on the code in LoicTheAztec's answer

// Manipulating product tabs

add_filter('woocommerce_product_tabs', 'change_product_tab', 98);
function change_product_tab($tabs){
global $product;

// Save the tabs to keep
$reviews = $tabs['reviews'];

// Remove tabs
unset($tabs['description']);
unset($tabs['additional_information']);
unset($tabs['reviews']);

// Add a new tab
$tabs['other_details'] = array(
    'title'     => __( 'Details', 'woocommerce' ),
    'priority'  => 10,
    'callback'  => 'other_details_tab_content'
);

// Set the good priority to existing "reviews" tab
$reviews['priority'] = 20;

// Add back "reviews" tab
$tabs['reviews'] = $reviews;

return $tabs;
}

// Tab content
function other_details_tab_content() {
    global $product;

    $heading = esc_html( apply_filters( 'woocommerce_product_description_heading', __( 'Description', 'woocommerce' ) ) );
$heading2 = esc_html( apply_filters( 'woocommerce_product_additional_information_heading', __( 'Additional information', 'woocommerce' ) ) );

?>

<h2><?php _e("Product details", "woocommerce"); ?></h2>
    <?php echo "<br>"; ?>

<!-- 1. Product description -->

<?php if ( $heading ) : ?>
  <h3><?php echo $heading; ?></h3>
<?php endif; ?>

<?php
    the_content();
    echo "<br>";
?>


<!-- 2. Product Additional information -->

<?php if ( $heading2 ) : ?>
<h3><?php echo $heading2; ?></h3>
<?php endif; ?>

<?php do_action( 'woocommerce_product_additional_information', $product ); ?>

<?php
}

You can also refer to the link here: https://docs.woocommerce.com/document/editing-product-data-tabs/