WooCommerce: Add a Custom Tab to Product Pages (with Code Examples)

WooCommerce provides three default tabs on product pages: Description, Additional Information, and Reviews. However, in many cases, shop owners need custom tabs to display, for example, size charts, technical specifications, or specific product details.

In this post, I will show you how to insert a custom tab into WooCommerce product pages – without plugins, just with PHP code!

Requirements

Before we get started, make sure you have the following:

• A WordPress website with WooCommerce installed
• Access to the theme or a custom plugin for modifications
• Basic knowledge of PHP

Understanding Standard Tabs in WooCommerce

WooCommerce uses the action woocommerce_product_tabs to manage product tabs. The three standard tabs are:

• Description (description_tab)
• Additional Information (additional_information_tab)
• Reviews (reviews_tab)

With a filter hook, we can add new tabs or remove existing ones.

Adding a Custom Tab in WooCommerce

To create a custom tab, add the following code to the functions.php of your child theme or in a custom plugin:

PHP Code for a Custom Tab:

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

function custom_product_tab_content() {
    echo '<h2>Additional Information</h2>';
    echo '<p>Here are additional product details.</p>';
}

💡 What does the code do?

• Adds a new tab titled “Additional Info”
• Sets the priority to 50 so it appears between existing tabs
• Uses a callback function to display content

Displaying Dynamic Content in the Tab

Instead of inserting static text, we can store and retrieve custom data per product.

Code: Retrieve Dynamic Content from the Product Metabox

function custom_product_tab_content() {
    global $post;
    $custom_text = get_post_meta($post->ID, '_custom_product_tab_content', true);
    if ($custom_text) {
        echo '<h2>Additional Information</h2>';
        echo '<p>' . esc_html($custom_text) . '</p>';
    }
}

💡 What does the code do? This loads the content from a custom field. If no input is provided, the tab remains empty.

Adding Backend Input for the Custom Tab

To allow shop owners to easily manage the content, we will extend the WooCommerce admin panel with a new field.

PHP Code for an Input Field in the Product Backend:

add_action('woocommerce_product_options_general_product_data', 'custom_product_admin_field');

function custom_product_admin_field() {
    woocommerce_wp_text_input(array(
        'id'          => '_custom_product_tab_content',
        'label'       => __('Additional Info', 'textdomain'),
        'placeholder' => 'Enter additional info here',
        'desc_tip'    => true,
        'description' => __('This information will appear in the additional tab.', 'textdomain'),
    ));
}

💡 What does the code do? Creates an input field in the WooCommerce product area. Admin can enter custom data for each product.

Saving the Admin Input in the Database

Now we will ensure that the data is saved:

PHP Code to Save the Field Content:

add_action('woocommerce_process_product_meta', 'save_custom_product_admin_field');

function save_custom_product_admin_field($post_id) {
    $custom_text = isset($_POST['_custom_product_tab_content']) ? sanitize_text_field($_POST['_custom_product_tab_content']) : '';
    update_post_meta($post_id, '_custom_product_tab_content', $custom_text);
}

💡 What does the code do? This code saves the user input in the database.

Visual Fine-Tuning with CSS

To make our tab look professional, we can style it with CSS.

Example: Change the Tab Header Color

.woocommerce-Tabs-panel h2 {
    color: #0071a1;
    font-size: 20px;
}

Conclusion

With just a few lines of PHP code, we were able to add a custom WooCommerce tab.

• New tab with title and custom content
• Dynamic content for each product individually
• Easy management through the admin panel

If you have any questions or suggestions, feel free to leave a comment!