How to Create Custom Product Tabs in WooCommerce?

WooCommerce’s single product page display is different from Amazon. At WooCommerce product page, description & reviews are shown below the image & short description. However, you can change this display and arrange otherwise. In this article, you will learn how to create custom product tabs in WooCommerce. 

Once this function gets activated, the tabs will be shown on top of each one. So, if you find such a display more user-convenient, then you must try it out. It’s a great way to improve your website’s user experience. 

Further, we will discover ‘pluggable functions’. Through these functions, you can establish a custom plugin function without using hooks & overrides. Doing so, WordPress will showcase a newer product page display instead of older WooCommerce one. 

So, let’s learn how to code it. 

Image showing newer product page display after applying create custom product tabs function in WooCommerce

PHP Snippet: WooCommerce Create Custom Product Tabs on top of each other at Single Product Page

WooCommerce showcases tabs through its 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' );
   }
}

So, our only task is to establish the woocommerce_output_product_data_tabs() PHP functions. After that, WordPress will start displaying a newer product page layout. 

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>';
}

Where do you add this snippet?

So, this is how you can create custom product tabs in WooCommerceAlso, it is easier to activate this function with this code. So, to apply this code, just add this PHP snippet at your child theme function.php file’s bottom. It should be placed before “?>”, if you have it there. Apart from this, CSS goes in your child theme style.css file. Make sure that you are editing these files in a right manner for best results.

Is this snippet still valid?

So, this is how you can learn about create custom product tabs in WooCommerce. I have applied this code on the Storefront theme and WordPress friendly hosting PHP 7.3. Let me know if everything works as expected when you code. Share it further if you find this snippet useful for you and it had saved your time. 

Also Read, How to Show Product Stock at Cart Page in WooCommerce?

How to Move Email Field to Top in WooCommerce at Checkout Page?

Important links: WooCommerce – https://woocommerce.com/