WooCommerce: “Explode” Product Tabs

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!

Here’s the new layout after tabs “exploded”. As you can see, “Description”, “Reviews” and other tabs are stacked on top of each other and they are all visible. Cool, huh?

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 ); ?>">
				if ( isset( $product_tab['callback'] ) ) {
					call_user_func( $product_tab['callback'], $key, $product_tab );
	echo '</div>';

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce Visual Hook Guide: Single Product Page
    Here’s a visual hook guide for the WooCommerce Single Product Page. This is part of my “Visual Hook Guide Series“, through which you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can copy/paste). If you like this guide and it’s helpful to you, let me know in the comments! […]
  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Add Custom Field to Product Variations
    Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]
  • WooCommerce: Show Number Of Products Sold @ Product Page
    WooCommerce database already stores the number of products sold for you. Therefore, you may want to show such number on the product page, close to the Add To Cart button. As we’ve seen in my book Ecommerce and Beyond, showing the number of sales for each product can increase your sales conversion rate. All you […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

13 thoughts on “WooCommerce: “Explode” Product Tabs

  1. After i have ‘exploded’ the contents (long product description & reviews), there are 2 Description and 1 Review Header.

    How do i remove both headers?

    1. Hi Adrian!

      Simply remove this line:

      <h2><?php echo $product_tab['title']; ?></h2>
  2. This is a great feature. It does have 2 Descriptions and 2 Additional Information. How do delete one of each?


    1. You mean 2 titles or the full tabs are duplicated?

  3. 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.

  4. 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.

    1. Hello Tomas! Where did you place this code?

      1. Hi Rodolfo, with code snippets

        1. This won’t work with Code Snippets, you must place this code in your child theme’s functions.php

      2. 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!

        1. Hi Chris, functions.php of your child theme

          1. Code works but no titles for each section. anyway to get that back?

            1. Try with this revised version

Questions? Feedback? Customization? Leave your comment now!

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *