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

💬 Let's Connect and Share!

Got a question about this snippet?

Something not working as expected? Need help customizing it for your specific needs?

💡

Want to request a custom snippet?

Have an idea for functionality you're missing on your site? Tell us what you're looking for!

🤝

Have an awesome snippet you're using?

Share it with us! Our community loves learning and growing together.

No comments yet.

Leave a Comment

Leave a Comment

To leave a comment, please enter your email address. We will send you a verification code to confirm your identity.

Email Verification

We sent a 6-digit verification code to your email address. Please check your inbox and enter the code below:

Write Your Comment

Great! Your email is verified. Now you can write your comment:

Comment Submitted!