Add a Custom Tab on Product Pages in WooCommerce – 2024

Enhancing product pages with additional information tabs can significantly improve the user experience in your WooCommerce store. Custom tabs allow you to display extra details such as usage instructions, technical specifications, or product videos that can help customers make informed decisions. This tutorial will guide you through the process of adding a custom tab to WooCommerce product pages.

Prerequisites

Ensure you have administrative access to your WordPress site and are familiar with editing PHP files. It’s recommended to implement these changes in a child theme to avoid losing customizations when updating the main theme.

Step 1: Add Custom Code to Your Theme’s functions.php File

Let’s begin by adding the necessary PHP code to your theme’s functions.php file to introduce a new custom tab.

/*
 * Snippet: Add a Custom Tab on Product Pages in WooCommerce – 2024
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?975
 * Tested with WooCommerce 8.8.2
*/

// Add new custom tab to WooCommerce product pages
add_filter('woocommerce_product_tabs', 'wcsuccess_add_custom_product_tab');

function wcsuccess_add_custom_product_tab($tabs) {
    // Adds the new tab
    $tabs['wcsuccess_custom_tab'] = array(
        'title'    => __('Extra Details', 'woocommerce'),
        'priority' => 50,
        'callback' => 'wcsuccess_custom_tab_content'
    );

    return $tabs;
}

// Content for the new tab
function wcsuccess_custom_tab_content() {
    // The content that will be displayed in the custom tab
    echo '<h2>Extra Details</h2>';
    echo '<p>Here you can add any specific content you want - be it text, images, or videos. Tailor this section to include information that is vital for your customers, which isn't covered in the default tabs.</p>';
}

Explanation of the Code

• Hook into WooCommerce Tabs: We use the woocommerce_product_tabs filter to add our custom tab.
• Define Tab and Content: The function wcsuccess_add_custom_product_tab adds a new tab array to the existing tabs, setting a title and a callback function for content. wcsuccess_custom_tab_content is the function where you define the actual content of the tab.

Step 2: Customise Your Tab Content

The placeholder text in wcsuccess_custom_tab_content should be replaced with whatever content is relevant to your products. This can include HTML, which allows for formatted text, images, embedded videos, and more.

Step 3: Testing Your New Custom Tab

• After adding the code:
  • Clear any caching plugins and your browser cache.
  • Navigate to any product page on your WooCommerce site.
  • You should see the new tab titled “Extra Details” along with the content you added in the custom function.

Further Customisation

• Dynamic Content: You can modify wcsuccess_custom_tab_content to pull dynamic content based on product-specific data or external APIs.
• Styling: Use additional CSS to style the tab and its content to match your store’s theme.

Conclusion

Adding a custom tab on product pages in WooCommerce allows you to enhance product descriptions and provide additional valuable information to your customers. This “Add a Custom Tab on Product Pages” functionality is not only a great way to improve engagement but also boosts the likelihood of purchase by better informing the customers.

It’s important to test any changes on a staging site before applying them to your live site to ensure everything works as expected. With this tutorial, you should now be able to effectively add and customise tabs on your WooCommerce product pages, improving the overall shopping experience for your customers.

John Cook

I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.

Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science.  I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.

Google Scholar ID: https://scholar.google.com.au/citations?user=0KvpwNEAAAAJ&hl=en

ORCID: https://orcid.org/0000-0001-8113-1296