How to add custom product tabs to WooCommerce with or without plugin?

In this article we will learn on how to add custom product tabs to WooCommerce shop pages. The process is quite easy and anyone can do it.

There are several ways to add custom product tabs. We are going to discuss two of the easiest ways. And, they are;

• How to add custom product tabs to WooCommerce without plugin?
• How to add custom product tabs to WooCommerce with a free plugin?

Before jumping into the main process, let’s get to know a bit more about WooCommerce product tab.

What is a Product Tab in WooCommerce?

WooCommerce Product Tabs are fields of information sorted by individual name or category. For example, three tabs come by default with WooCommerce plugin: Description, Additional Information, and Reviews. The Description tab contains product details such as product name, category, specification, etc. Similarly, Additional Information and Reviews tabs contain other relevant information.

However, you can add extra tabs to the WooCommerce product page and remove the default one if needed. Here, we will discuss only the process to add more custom tabs to the product page.

BTW, if you need to remove a default tab, we have a guiding article, “How To Hide Additional Information Tab from WooCommerce.” 

So, how to use custom product tabs for WooCommerce? We are about to start the process using a code first.

How to add custom product tabs to WooCommerce without plugin?

To add custom product tabs in WooCommerce without a plugin, you need to use a custom code snippet. So, we have created a ready-to-go code snippet to add two extra tabs to the product page. They are for;

1. Deliver process and
2. Return policy

Note: As the tabs are dynamic, if you do not input any data from any of the tabs, the specific tab will not be visible in the product page.

Code Snippet:

// Start FrontEnd
add_filter( 'woocommerce_product_tabs', 'echoatheme_custom_tab' );
function echoatheme_custom_tab( $tabs ) {
    global $product;
    $meta_value = get_post_meta( get_the_ID(), '_product_pricing_variation', true );
    // Check if the custom field has a value.
    if ( ! empty( $meta_value ) ) {
        $tabs['echoatheme_custom_tab'] = array(
            'title'    => 'Refund Policy',
            'callback' => 'echoatheme_custom_tab_content',
            'priority' => 50,
        );
    }
    $meta_value_2 = get_post_meta( get_the_ID(), '_product_extra_features', true );
    // Check if the custom field has a value.
    if ( ! empty( $meta_value_2 ) ) {
        $tabs['echoatheme_custom_tab_2'] = array(
            'title'    => 'Delivery Process',
            'callback' => 'echoatheme_custom_tab_content_2',
            'priority' => 60,
        );
    }
    return $tabs;
}
function echoatheme_custom_tab_content()  {
    // The new tab content
    $prod_id = get_the_ID();
    echo'<p>'.get_post_meta($prod_id,'_product_pricing_variation',true).'</p>';
}
function echoatheme_custom_tab_content_2()  {
    // The new tab content
    $prod_id = get_the_ID();
    echo'<p>'.get_post_meta($prod_id,'_product_extra_features',true).'</p>';
}
// Backend
// Display Fields
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');
// Save Fields
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');
function woocommerce_product_custom_fields()
{
    global $woocommerce, $post , $product_object;
    echo '<div class="product_custom_field">
    <p>' . __( "Delivery Process: " ) . '</p>
    <div style="padding:9px;">';
    $content  = $product_object->get_meta( '_product_extra_features' );
    wp_editor( $content, '_product_extra_features', ['textarea_rows' => 6] );
    echo '</div></div>';
    echo '<div class="product_custom_field">
    <p>' . __( "Refund Policy: " ) . '</p>
    <div style="padding:9px;">';
    $content  = $product_object->get_meta( '_product_pricing_variation' );
    wp_editor( $content, '_product_pricing_variation', ['textarea_rows' => 6] );
    echo '</div></div>';
    //add_meta_box( '_product_pricing_variation', __( 'Product Pricing Variation', 'woocommerce' ), 'WC_Meta_Box_Product_Short_Description::output', 'product', 'normal' );
}
function woocommerce_product_custom_fields_save($post_id)
{
// Custom Product Textarea Field
    $woocommerce_product_pricing_variation = $_POST['_product_pricing_variation'];
    if (!empty($woocommerce_product_pricing_variation))
        update_post_meta($post_id, '_product_pricing_variation', $woocommerce_product_pricing_variation);
    $woocommerce_product_extra_features = $_POST['_product_extra_features'];
    if (!empty($woocommerce_product_extra_features))
        update_post_meta($post_id, '_product_extra_features', $woocommerce_product_extra_features);
}

Copy the code, go to WordPress Dashboard>Appearance>Theme File Editor and paste it to the bottom of the function.php. Hit the Update File button and you are done.

However, you can change the tab title as you need. For example, you need to change ‘Delivery Process’ title with ‘How to order’. Just change text from two different places in the code following the example below, and that’s it.

Example:

Before: ‘title’    => ‘Delivery Process’,  After: ‘title’    => ‘your title’, 

Before: <p>’ . _( “Delivery Process: ” ) . ‘</p>   After: <p>’ . _( “your paragraph: ” ) . ‘</p>

Now, go to WordPress Dashboard>Products and edit a product page. You will see two custom fields are added in the general tab of the Product Data section. 

1. Delivery Process
2. Refund Policy

Now, write information and add media files as you need and update the page.

You are done with the process. Let’s see what it looks like in the front end.

How To Add Custom Product Tabs To WooCommerce With a Free Plugin?

Now, we will add custom tabs using one of the best WooCommerce product tab plugins from the WordPress repository.

Go to WordPress Dashboard>Plugins>Add Plugins and search by the keyword “custom product tabs for WooCommerce” then install & activate it (see below image). Once activated, look for the plugin to the WordPress sidebar and click on it.

Now, click on the “Add New” button and create custom product tabs as many as you want.

Afterward, add a title and description for the tab and hit the save button. In the same way, you can add more tabs for later use.

At this moment, we are adding a new product named ‘Nike Soccer Ball’ and adding a demo info. Locate the ‘Custom Tabs’ feature to the end of the page and click on that. It will brings two options;

• Add a Tab
• Add a Saved Tab

But, we will go for the saved tab option to select the one of the product tabs that we added before. You can also arrange tabs using the ‘Move tab order’ option.

Finally, publish and view the product page. The result will look as below.

Final Verdict

Both ways serve on how to add a custom tab to a WooCommerce product page. But, to be honest, I found that using custom codes is better than others. It keeps your website lightweight and faster. So, I, as a web designer, personally prefer using custom code.

Hope this tutorial was helpful to you. Please, share your experience in the comment section below how you make use of it.

FAQ