Hide the Description and Reviews Tabs in WooCommerce Products
WooCommerce products by default show ‘description‘ and ‘reviews‘ tabs below the product on a WordPress product page, you can hide these tabs from view as well as a third tab ‘additional information‘ with a snippet of code that goes in your themes functions.php file
As well as remove the tabs you can rename the heading in the tabs with this snippet
You can also re-order the tabs with this snippet
If the tabs are not used on some products you may get a PHP error about undefined index on title or call back, in this case it is best to wrap the tabs in an isset function to check they are being used.
Here is a guide on adding extra tabs.
If a tab is renamed and then reordered then the tabs are still being shown on the products where the content of the tab is still left blank. Any workaround for this issue?
I’m putting the following code
/*
add_filter( ‘woocommerce_product_tabs’, ‘woo_rename_tabs’, 98 );
function woo_rename_tabs( $tabs ) {
$tabs[‘description’][‘title’] = __( ‘more information’ ); // Rename the description tab
$tabs[‘additional_information’][‘title’] = __( ‘eyewear deatil’ ); // Rename the additional information tab
return $tabs;
} */
add_filter( ‘woocommerce_product_tabs’, ‘woo_reorder_tabs’, 98 );
/**
* Re-order WooCommerce Tabs – this code reorders tabs – the higher the priority(lowest number) goes first
* Checks to see if used avoiding undefined notices
*/
function woo_reorder_tabs( $tabs ) {
if ( isset( $tabs[‘download_tab’] ) ) {
$tabs[‘download_tab’][‘priority’] = 20;
}
if ( isset( $tabs[‘description’] ) ) {
$tabs[‘description’][‘priority’] = 15;
}
if ( isset( $tabs[‘additional_information’] ) ) {
$tabs[‘additional_information’][‘priority’] = 5;
}
return $tabs;
}
I had to comment the renaming code block to make it work.
Thank you! I am using the Divi theme and this works on both desktop and mobile and it worked instnatly.
Nice Article. Thanks for sharing.
Could u please advice here about deleting tabs. Do we require to define new function for deleting tab like
add_filter( ‘woocommerce_product_tabs’, ‘woo_delete_tabs’, 98 );
function woo_delete_tabs( $tabs ) {
…
}
You unset as per first code snippet – https://gist.github.com/neilgee/e82abb3ec22bbdacf27b#file-remove-tabs-php
Nice. I need this solution for my website. Thanks!
Thankyu so Much Bro For This Code….
That was very helpful. Thanks for that snippet. Regards.
Description tab removed but review is not. I want to remove both tabs. But content of these tabs will show section by sention on same page without tabs. how?
Description removed but review is not removed. tried the code several time but not fixed.
I can confirm that as of today (1/21/2019) with WP 5.03 cutting and pasting the above as follows:
add_filter( ‘woocommerce_product_tabs’, ‘woo_remove_product_tabs’, 98 );
function woo_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
return $tabs;
}
works just fine. I placed it as the very first lines of code and now I do not see the descriptions nor reviews tabs…because I am just launching and have zero feedback yet (positive or negative). I did learn you will have to re-do this everything Woo commerce is upgraded.
Thank you very much to whoever left this code. Much appreciated.
Hi
If I want to remove the heading of the tab
add_filter(‘woocommerce_product_description_heading’, ‘__return_empty_string’);
add_filter(‘woocommerce_product_additional_information_heading’, ‘__return_empty_string’);
is this working
But I can’t remove the heading of “Reviews”
Not working = add_filter(‘woocommerce_product_reviews_heading’, ‘__return_empty_string’);
Any suggestions?
:-)
Morten
Perfect! Thanks for the code!
I would like it exactly the other way around, diplay on desktop, hide on mobile / tablet portait. Any one?
Best regards,
Remco
I would like to hide product description for my store but show it to my mobile site! Is there a way?
Thanks
You can use css and target the desktop screen size e.g
@media only screen and (min-width: 768px) { …}