How to Add Custom Product Tabs on the WooCommerce Single Product Page

Custom product tabs on the WooCommerce single product page are a powerful way to enhance product information, improve UX, and boost SEO. In this tutorial, we’ll explore how to add dynamic, conditionally rendered, and even custom field-driven product tabs using advanced techniques.

Why Add Custom Tabs?

• 💡 Show technical specifications, ingredients, how-to-use instructions, FAQs, etc.
• 🎯 Tailor content based on product categories or meta fields.
• 🧩 Integrate ACF (Advanced Custom Fields) or any custom meta fields.
• ⚡ Improve engagement and reduce support questions.

To Add Custom Product Tabs on the WooCommerce Single Product Page Use Below Code

Add code to your child theme’s functions.php file or via a plugin that allows custom functions to be added, such as the Code snippets plugin. Avoid adding custom code directly to your parent theme’s functions.php file as this will be wiped entirely when you update the theme.

WooCommerce provides a filter hook woocommerce_product_tabs to modify, add, or remove tabs on the product page.

Basic Structure

add_filter('woocommerce_product_tabs', 'add_custom_product_tab');
function add_custom_product_tab($tabs) {
    $tabs['custom_tab'] = [
        'title'    => __('Additional Info', 'your-textdomain'),
        'priority' => 50,
        'callback' => 'custom_product_tab_content'
    ];
    return $tabs;
}

function custom_product_tab_content() {
    echo '<h2>Additional Information</h2>';
    echo '<p>This is your custom tab content.</p>';
}

Dynamic Tabs Based on Category

Want to show a “Care Instructions” tab only on products from the “Apparel” category?

add_filter('woocommerce_product_tabs', 'add_care_tab_for_apparel');
function add_care_tab_for_apparel($tabs) {
    global $product;

    if (has_term('apparel', 'product_cat', $product->get_id())) {
        $tabs['care_tab'] = [
            'title'    => __('Care Instructions', 'your-textdomain'),
            'priority' => 30,
            'callback' => 'care_tab_content'
        ];
    }

    return $tabs;
}

function care_tab_content() {
    echo '<p>Hand wash only. Do not bleach. Iron on low heat.</p>';
}

Advanced Example: Conditionally Add Tab with ACF Field Content

Let’s say you’ve created a custom field using ACF called product_faq. You only want to show the “FAQs” tab if the field has content.

add_filter('woocommerce_product_tabs', 'add_faq_tab_conditionally');
function add_faq_tab_conditionally($tabs) {
    global $post;

    $faq_content = get_field('product_faq', $post->ID);
    if ($faq_content) {
        $tabs['faq_tab'] = [
            'title'    => __('FAQs', 'your-textdomain'),
            'priority' => 25,
            'callback' => 'faq_product_tab_content'
        ];
    }

    return $tabs;
}

function faq_product_tab_content() {
    global $post;
    $faq_content = get_field('product_faq', $post->ID);
    echo '<div class="faq-tab-content">';
    echo apply_filters('the_content', $faq_content);
    echo '</div>';
}

Using Custom Fields from Meta (Without ACF)

If you’re storing product data with custom meta keys:

function add_custom_meta_tab($tabs) {
    global $post;

    $extra_info = get_post_meta($post->ID, '_extra_product_info', true);

    if (!empty($extra_info)) {
        $tabs['extra_info_tab'] = [
            'title'    => __('Extra Info', 'your-textdomain'),
            'priority' => 45,
            'callback' => function() use ($extra_info) {
                echo '<div class="extra-info-tab">';
                echo wp_kses_post(wpautop($extra_info));
                echo '</div>';
            }
        ];
    }
    return $tabs;
}
add_filter('woocommerce_product_tabs', 'add_custom_meta_tab');

➡️ Here I did not create any separate function callback i just print output as closures.

🎨 Styling the Tabs

Add some polish with CSS (place in your theme’s style.css or enqueue properly) or you can use Additional CSS option in your Customize under Appearance menu.

<style>
.woocommerce-tabs .panel {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #e1e1e1;
    border-top: none;
}
.woocommerce-tabs .panel h2 {
    margin-top: 0;
}
</style>

Use a Plugin Hook for Tab Fields (ACF Pro Repeater Example)

function add_ingredients_tab($tabs) {
    global $post;

    if (have_rows('product_ingredients', $post->ID)) {
        $tabs['ingredients'] = [
            'title'    => __('Ingredients', 'your-textdomain'),
            'priority' => 40,
            'callback' => 'ingredients_tab_content'
        ];
    }
    return $tabs;
}
add_filter('woocommerce_product_tabs', 'add_ingredients_tab');

function ingredients_tab_content() {
    echo '<ul class="ingredients-list">';
    while (have_rows('product_ingredients')) {
        the_row();
        $ingredient = get_sub_field('ingredient');
        echo '<li>' . esc_html($ingredient) . '</li>';
    }
    echo '</ul>';
}

Adding custom product tabs in WooCommerce opens the door to highly customized product pages that deliver better value to customers.