Display WooCommerce product description and additional information horizontally in the same tab

I’m having trouble getting my product page to display correctly.

I’m hoping to try and get a result like this on my product page. (Description & attributes horizontal in same tab)

---

As you can see in the picture the description is on the left and the attributes show on the right.

On my site, I have currently removed the attributes tab and have it nested underneath the description, using this code in my functions.php:

add_filter( 'woocommerce_product_tabs', 'exetera_custom_product_tabs', 98 );
function exetera_custom_product_tabs( $tabs ) {
        
    // Custom description callback.
    $tabs['description']['callback'] = function() {
        global $post, $product;


        // Display the content of the Description tab.
        the_content();


        // Display the heading and content of the Additional Information tab.

        echo '<h2>Specifications</h2>';

        do_action( 'woocommerce_product_additional_information', $product );
    };

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

    return $tabs;
}

Just can’t figure out how to get it to sit horizontally next to each other.

Any help would be greatly appreciated, Thanks in advance!

Answer

You have to wrap the content of the tabs in divs and then align/style them with CSS. However, this is theme dependent and so my answer is reduced to the absolute basics.

add_filter( 'woocommerce_product_tabs', 'exetera_custom_product_tabs', 98, 1 );
function exetera_custom_product_tabs( $tabs ) { 
    // Custom description callback.
    $tabs['description']['callback'] = function() {
        global $post, $product;

        echo '<div class="description left" style="float:left;width:49%;">';

        // Display the content of the Description tab.
        the_content();
        
        echo '</div>';

        // Display the heading and content of the Additional Information tab.

        echo '<div class="specifications right" style="float:right;width:49%;">';

        echo '<h2>Specifications</h2>';

        do_action( 'woocommerce_product_additional_information', $product );
        
        echo '</div>';
    };

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

    return $tabs;
}