Add Custom Tab to WooCommerce Product Page

Beginner
✓ Tested
📅 September 13, 2025
⬇️ 0 Downloads
📋 0 Copies

This simple snippet adds a new “Custom Tab” to WooCommerce product pages only when content is added. You can add custom content for each product directly from the product edit page in WordPress admin.

What does this code do?

Adds a new tab called “Custom Tab” to product pages
Creates a text box in the product edit page where you can add custom content
Displays the custom content in the new tab on the frontend
Only shows the tab if content exists – no empty tabs!

Perfect for:

Size guides
Shipping information
Care instructions
Product specifications
Installation guides
Warranty information

The tab appears after the standard WooCommerce tabs and the content is saved per product, so each product can have different tab content.

⚠️ Important Warnings

⚠️ Always backup before adding code to functions.php
⚠️ Test on staging site first before going live
⚠️ Unique tab keys - don't use existing WooCommerce tab names
⚠️ Theme compatibility - some themes may style tabs differently
⚠️ Child themes - use child theme's functions.php to avoid losing changes on theme updates
⚠️ Translation - tab titles should be wrapped in translation functions for multilingual sites
⚠️ Content security - be careful with user input in tab content
💻 PHP Code
/**
 * Add custom tab to WooCommerce product page
 * Simple and easy to customize
 * Prefix: tpsc_ (TP Snippet Collection)
 */

add_filter('woocommerce_product_tabs', 'tpsc_add_custom_product_tab');

function tpsc_add_custom_product_tab($tabs) {
    global $product;
    
    // Get custom content from product meta field
    $custom_content = get_post_meta($product->get_id(), '_custom_tab_content', true);
    
    // Only add tab if content exists
    if (!empty($custom_content)) {
        $tabs['custom_info'] = array(
            'title'    => __('Custom Tab', 'woocommerce'), // TAB TITLE
            'priority' => 50, // TAB SORTING (DESC 10, ADD INFO 20, REVIEWS 30)
            'callback' => 'tpsc_custom_tab_content', // TAB CONTENT CALLBACK
        );
    }
    
    return $tabs;
}

function tpsc_custom_tab_content() {
    global $product;
    
    // Get custom content from product meta field
    $custom_content = get_post_meta($product->get_id(), '_custom_tab_content', true);
    
    echo '<div class="custom-tab-content">';
    echo wpautop($custom_content);
    echo '</div>';
}

// Add meta box to product edit page
add_action('add_meta_boxes', 'tpsc_add_custom_tab_meta_box');

function tpsc_add_custom_tab_meta_box() {
    add_meta_box(
        'custom_tab_content',
        'Custom Tab Content',
        'tpsc_custom_tab_meta_box_content',
        'product'
    );
}

function tpsc_custom_tab_meta_box_content($post) {
    $value = get_post_meta($post->ID, '_custom_tab_content', true);
    echo '<textarea name="custom_tab_content" rows="5" style="width:100%;">' . esc_textarea($value) . '</textarea>';
    echo '<p>This content will appear in the "Custom Tab" on the product page.</p>';
}

// Save meta box data
add_action('save_post', 'tpsc_save_custom_tab_content');

function tpsc_save_custom_tab_content($post_id) {
    if (isset($_POST['custom_tab_content'])) {
        update_post_meta($post_id, '_custom_tab_content', sanitize_textarea_field($_POST['custom_tab_content']));
    }
}

📝 Installation Instructions

QUICK START:

Copy and paste the code into your theme's functions.php file
Go to any product edit page in WordPress admin
Scroll down to find the new "Custom Tab Content" box
Add your content and save the product
View the product on your site - the new tab will appear only if content was added!

TO CHANGE THE TAB TITLE:
Line 18: Change 'Custom Tab' to your desired title
'title' => __('Size Guide', 'woocommerce'), // Change this

TO CHANGE TAB POSITION:
Line 19: Change the priority number
'priority' => 25, // Lower number = appears earlier

📸 Screenshots