If you like the Amazon single product page layout, you probably dislike the default WooCommerce single product page tabs layout. This is the section where, by default, “Description”, “Reviews”, “Additional Information” and other custom content show… as tabs below the image & short description.
Thankfully, there is a super easy way to remove such tabs and display each tab on top of each other, without hiding any content. If it’s good for your users, then I recommend you make use of this super simple snippet.
In this tutorial, you will learn about “pluggable functions”. Basically, where provided, you can simply redeclare a custom plugin (WooCommerce) function without having to use hooks or overrides. WordPress will just “listen” to your new version and not the original one any longer.
So, enjoy!
PHP Snippet: Stacking Product Tabs On Top Of Each Other @ WooCommerce Single Product Page
First of all, as I already said, tabs are displayed by WooCommerce thanks to this “pluggable” function:
if ( ! function_exists( 'woocommerce_output_product_data_tabs' ) ) {
/**
* Output the product tabs.
*/
function woocommerce_output_product_data_tabs() {
wc_get_template( 'single-product/tabs/tabs.php' );
}
}
That’s great, so we can simply redeclare the woocommerce_output_product_data_tabs() PHP function and tell WordPress to listen to our new version:
/**
* @snippet Explode Tabs @ WooCommerce Single Product Page
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 5
* @community https://businessbloomer.com/club/
*/
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 ) {
?>
<h2><?php echo $product_tab['title']; ?></h2>
<div id="tab-<?php echo esc_attr( $key ); ?>">
<?php
if ( isset( $product_tab['callback'] ) ) {
call_user_func( $product_tab['callback'], $key, $product_tab );
}
?>
</div>
<?php
}
echo '</div>';
}
After i have ‘exploded’ the contents (long product description & reviews), there are 2 Description and 1 Review Header.
How do i remove both headers?
Hi Adrian!
Simply remove this line:
This is a great feature. It does have 2 Descriptions and 2 Additional Information. How do delete one of each?
Thannks.
You mean 2 titles or the full tabs are duplicated?
Thank you very much! :)))
I discovered your site looking for this function and I’m enjoying everything here…
First I tried to add this snippet via the Code Snippets plugin, but it did not allow me to publish, returning the message: “Cannot redeclare function woocommerce_output_product_data_tabs.”
In functions.php it worked perfectly, however, the titles of the tabs are not shown anymore.
The content was completely sequential, without being divided by the titles “Description”, “Additional Information”, “Review”, etc.
Should this happen? How is it possible to show these titles again? Or, how can I show custom titles?
Thank you again.
Hi Rodolfo, when I try to activate this snippet I get the following error message:
The code snippet has been disabled due to an error on line 2:
Unable to redeclare the woocommerce_output_product_data_tabs function.
Hello Tomas! Where did you place this code?
Hi Rodolfo, with code snippets
This won’t work with Code Snippets, you must place this code in your child theme’s functions.php
Hi! Thank you so much for all of your snippets. They are awesome! I get an error when I use the snippets plugin. I guess I should add the code elsewhere. Can you tell me where? Thanks for everything you do!
Hi Chris, functions.php of your child theme
Code works but no titles for each section. anyway to get that back?
Try with this revised version