Site icon Experience Wordpress Developer Online – Design Develop and Maintenance Support

How to Customize WooCommerce Product Tabs

I will now discuss how to customize woocommerce product tab in single product page at woocommerce. If you use WooCommerce, I’m sure you have noticed that there are three built-in WooCommerce Product Tabs appeared on your product page: Description, Additional Information, and Reviews. How to Customize this product tabs. Let’s see how to do it. see the following screenshot which is deafult product tab in single product page at woocommerce.

Add a custom WooCommerce Product Tabs

If you want to Add a custom WooCommerce Product Tabs in single product page at woocommerce than add the following line of code at the end of your theme’s functions.php file of your active child theme (or theme) and Save the file. Refresh your product page.

add_filter( 'woocommerce_product_tabs', 'wp_new_product_tab' );
function wp_new_product_tab( $tabs ) {
    // Add the new tab
    $tabs['discount_tab'] = array(
        'title'       => __( 'Discount', 'text-domain' ),
        'priority'    => 50,
        'callback'    => 'wp_new_product_tab_content'
    );
    return $tabs;
}

function wp_new_product_tab_content() {
    // The new tab content
    echo 'Discount';
    echo 'Here\'s your new discount product tab.';          
}

Removing WooCommerce Product Tabs

If You want to Removing WooCommerce Product Tabs in single product page at woocommerce than add the following line of code at the end of your theme’s functions.php file of your active child theme (or theme) and Save the file.

add_filter( 'woocommerce_product_tabs', 'wp_remove_product_tabs', 98 );
function wp_remove_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
    unset( $tabs['discount_tab'] );                // Remove the discount tab
    return $tabs;
}

Re-ordering WooCommerce Product Tabs

If you want to Re-ordering WooCommerce Product Tabs in single product page at woocommerce than add the following line of code at the end of your theme’s functions.php file of your active child theme (or theme) and Save the file.

add_filter( 'woocommerce_product_tabs', 'wpb_reorder_tabs', 98 );
function wpb_reorder_tabs( $tabs ) {
    $tabs['reviews']['priority']                = 5;      // Reviews first
    $tabs['discount_tab']['priority']                 = 10;    // discount second
    $tabs['description']['priority']            = 15;   // Description third
    $tabs['additional_information']['priority'] = 20;  // Additional information fourth
    return $tabs;
}
Exit mobile version