Website Building » WooCommerce » How Do I Add a Custom Tab to a WooCommerce Product Page?

How Do I Add a Custom Tab to a WooCommerce Product Page?

Last updated on January 29, 2023 @ 7:59 pm

Adding a custom tab to a WooCommerce product page is a great way to provide more information about your product and increase its appeal to potential customers.

There are two primary ways to add a custom tab to a WooCommerce product page:

  • Through the use of a plugin
  • By editing the code of your theme.

If you opt to use a plugin, there are many great options available. One popular option is the “YITH WooCommerce Tab Manager” plugin.

Select the plugin and search for YITH WooCommerce Tab Manager WordPress

This plugin allows you to easily create and manage custom tabs for your WooCommerce products. Simply install and activate the plugin, then navigate to the “Custom Tabs” section of your WordPress dashboard.

From here, you can create new tabs and assign them to specific products.

If you prefer not to use a plugin, you can also add custom tabs to WooCommerce product pages by editing your “theme’s code“.

Click on Theme Editor Under Appearance of WordPress

To do this, you’ll need to access the “single-product.php” file in your theme’s folder and look for the “woocommerce_after_single_product_summary” hook.

Select single-product.php WordPress

This hook is where the default WooCommerce tabs are added, so adding your custom tab here will ensure it appears in the same location.

Once you’ve located the “woocommerce_after_single_product_summary” hook, simply add the following code snippet:

// Add new tab
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) { 

  $tabs['new_tab'] = array(
    'title' 	=> __( 'New Tab', 'woocommerce' ),
    'priority' 	=> 50,
    'callback' 	=> 'woo_new_product_tab_content' );

  return $tabs; }

 // The new tab content
function woo_new_product_tab_content() {

  // The new tab content goes here.. }

Be sure to replace “New Tab” with the desired title for your custom tab and “The new tab content goes here“. with the actual content you want to display in your custom tab. Once you’ve saved your changes, your custom tab should now appear on all WooCommerce product pages.

Conclusion

To add a custom tab to a WooCommerce product page, one can choose between two options: using a plugin or editing the theme’s code. This provides flexibility for users with different levels of technical expertise to add custom content to their product pages.

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.