To remove the tabs (description, additional information and ratings) on the product page in WooCommerce or to place all information below one another, we use the following short code snippet.
By default, WooCommerce displays separate tabs for description, additional information and ratings on the product page. Sometimes it makes sense to do without tabs for usability reasons. Amazon and other large shops also show the content one below the other instead of in tabs. The approach comes from the mobile area and we have become very used to it. It is not wrong to orientate yourself to the big ones, as they have often already invested a lot in optimizing their presence and the potential visitors have already got used to it.
function woocommerce_output_product_data_tabs() {
$product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
if ( empty( $product_tabs ) ) return;
echo '<div class="woocommerce-tabs wc-tabs-wrapper">';
foreach ( $product_tabs as $key => $product_tab ) {
echo '<div id="tab-' . esc_attr( $key ) . '">';
if ( isset( $product_tab['callback'] ) ) {
call_user_func( $product_tab['callback'], $key, $product_tab );
}
echo '</div>';
}
echo '</div>';
}
As you can see in the example here, all information is displayed one below the other and the tab bar (as shown above) is not visible.
This gives the visitor an overview of all information at a glance.
What do you like better with tabs or with each other?
alternative solution
Alternatively there is this solution at gist.github.com . This has the disadvantage that the empty DIVs are still displayed, even if there is no content. This can of course also be solved in the code. With the above solution, tab content is only included if it is available.
