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.0
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

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 ) {
		?>
			<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>';
}
Share:

Leave a Reply