How To Add Custom Tab, Remove And Change Position Of Default Tab Woocommerce

This article shows how to add a custom tab, & remove and change the position of Woocommerce single product page default tab using Woocommerce hook which very useful for you guys.

Introduction

 

This article shows how to add a custom tab, remove and change the position of a Woocommerce single product page default tab using a Woocommerce hook,  which will be very useful.

 

In WordPress when Woocommerce is set up on your website then many things come as default like category page, shop page, product page, but in some cases users want to customize their product pages.  For this, Woocommerce provide ssome hooks and actions.

 

In this article, we will use hooks, so let me give you guys some basic ideas about the hook.

 

What is the hook?

 

The hook is one way for one piece of code to interact/modify actual code output or default code of WordPress in a simple way. You can say that it modifies actual or predefine code. Using hook you  can customize WooCommerce layout, product image, size of the product image, text of WooCommerce button and hange the position of the Woocommrece product section, and much more.

 

Example of a hook used with a filter in WordPress:

function rk_custom_excerpt($output) {
    if (has_excerpt() && !is_attachment()) {
        $output. = wpb_continue_reading_link();
    }
    return $output;
}
add_filter('get_the_excerpt', 'rk_custom_excerpt');

Now you know basic things about the hook in WordPress. 

How to remove the tab on Woocommerce single product page?

If you want to remove default tabs available on the Woocommerce single product page you need to use 'woocommerce_product_tabs' hook and create your custom function like 'rk_remove_sinle_product_tabs' you can give function name as per your choice.

 

Here is a hook, you just need to copy the below code and paste into your active theme functions.php and you'll see your Woocommerce default tabs, which are available on product single page, will be removed.

add_filter('woocommerce_product_tabs', 'rk_remove_sinle_product_tabs')

function rk_remove_sinle_product_tabs($tabs) {
    unset($tabs['description']); // Remove the description tab
    unset($tabs['reviews']); // Remove the reviews tab
    unset($tabs['additional_information']); // Remove the additional information tab
    return $tabs;
}

Now you know how to remove default on the product page in your WooCommerce template.

 

In many cases, a user wants extra tabs based on client requirements so for this Woocommerce also provides the hook.

 

How to add a custom tab on Woocommerce single product page?

If you want to add a custom tab on the Woocommerce single product page you need to use 'woocommerce_product_tabs' hook and create your custom function like 'rk_custom_product_tabs'. You can give function name as per your choice.

 

You just need to copy the below code and paste it into your active theme functions.php and you see that your Woocommerce product single page new custom tab is added.

add_filter('woocommerce_product_tabs', 'rk_custom_product_tabs');

function rk_custom_product_tabs($tabs) {
    $tabs = array('title' => 'Custom tab', 'priority' => 20, 'callback' => 'get_rk_custom_product_tab_content', );
    return $tabs;
}

function get_rk_custom_product_tab_content() {
    echo "custom tab data"; // code here
}

Now you know how to add custom tabs on the product page in your WooCommerce template.

 

One more new case is if your client wants to change the position of your tabs, then also you can  do this type of task using Woocommerce hooks.

 

How to change the position of default/custom tab on the Woocommerce single product page?

If you want to change the position of default/custom tabs on the Woocommerce single product page you need to use 'woocommerce_product_tabs' hook and create your custom function like 'rk_change_position_tabs'. You can give function name as per your choice.

 

You just need to copy the below code and paste into your active theme functions.php and you'll see that your Woocommerce product single page new custom tab position is changed.

add_filter('woocommerce_product_tabs', 'rk_change_position_tabs');

function rk_reordered_tabs($tabs) {
    $tabs['cherry_wc_video']['priority'] = 5;
    $tabs['description']['priority'] = 10;
    $tabs['reviews']['priority'] = 15;
    return $tabs;
}

Now you know how to change the order of tabs on the product page in your WooCommerce template.

 

Summary

In this article, we learned how to add a custom tab, remove the default tab, and change the position of tabs in the Woocommerce single product page.

 

I hope that you found this tutorial easy to follow and understand.