Skip to content

Instantly share code, notes, and snippets.

@kittenlane
Last active November 30, 2023 20:07
Show Gist options
  • Star 30 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save kittenlane/a09a58fdcf6001bafe3c to your computer and use it in GitHub Desktop.
Save kittenlane/a09a58fdcf6001bafe3c to your computer and use it in GitHub Desktop.
Remove tabs but keep product description in WooCommerce
//* http://gasolicious.com/remove-tabs-keep-product-description-woocommerce/
// Location: add to functions.php
// Output: removes woocommerce tabs
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
//* http://gasolicious.com/remove-tabs-keep-product-description-woocommerce/
// Location: add to functions.php
// Output: adds full description to below price
function woocommerce_template_product_description() {
woocommerce_get_template( 'single-product/tabs/description.php' );
}
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_product_description', 20 );
/* remove "Product Description" heading */
.summary h2 {
display: none;
}
@blix1
Copy link

blix1 commented Apr 9, 2018

None of the above code worked for me. I just used this to remove the tabs and keep the description. I haven't input any other information to display than the description, so don't know how this might behave if you have placed text / info in another field but this worked for me. This is simple css. Hope it helps.

/* remove single product tabs */
.qodef-woo-single-page .qodef-tabs.qodef-vertical-tab .qodef-tabs-nav {
display: none;
}

/* makes description 100% width */
.qodef-tabs.qodef-vertical-tab .qodef-tab-container {
width:100%!important;
}

@mwbarican
Copy link

Hi!

Is there a way to make the one of the tabs link to an external content like a page outside the product? Been looking for a snippet but haven't had any luck. Thanks!

Copy link

ghost commented Aug 1, 2018

Notice: woocommerce_get_template is deprecated since version 3.0! Use wc_get_template instead.

Replacing woocommerce_get_template with wc_get_template fixes it.

function woocommerce_template_product_description() {
  wc_get_template( 'single-product/tabs/description.php' );
}
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_product_description', 20 );

@itsgrahamfoster
Copy link

Hello, this code is fantastic, thanks!

Is there a way to move the Description below the Add to Basket button? Thereby moving the Add to Basket button to below the short description, and the Full description below that?

@slipperx
Copy link

slipperx commented Sep 7, 2018

@itsgrahamfoster Try increasing the number to 30 in the add action code - worked for me.

@slipperx
Copy link

slipperx commented Sep 7, 2018

@itsgrahamfoster I see that my above suggestion works if you have the default layout on the single product page but if you want the description full width below using the Stacked option in the Storefront customiser then it doesn't work because the default sets up the content in two responsive columns. So if you add it after the single product loop then it formats full page. This is the code I used

add_action( 'woocommerce_after_single_product', 'woocommerce_template_product_description', 30 );

@MortenAndersen
Copy link

You can also remove the heading using a filter in functions.php rather than overriding the template:

add_filter('woocommerce_product_description_heading', '__return_null');

and

add_filter('woocommerce_product_additional_information_heading', '__return_empty_string');

But reviews_heading is a mystery for me :-)

@makeonlineshop
Copy link

@blix1

Thank you but this CSS does not remove the Description tab on my theme.
Any other solution to remove the tab but keep the description ?

Thanks again.

@beautyinabox
Copy link

beautyinabox commented Apr 10, 2019

Hey guys,

How can I change the color of the tabs to black?

Also how can I change the color of my product review stars from yellow to black?

Thank you

@joshchretien
Copy link

THANK YOU SO MUCH FOR THIS!

Has anyone figured out how to also call the reviews info? I want to show just the description and reviews but can't seem to find the call for reviews. I'm fairly new to altering code like this but would GREATLY appreciate any help!

You guys rock btw.

@haagmeister
Copy link

haagmeister commented May 6, 2019

Does this code go in functions.php? just put at the bottom or replace existing code? Using Avada with Woocommerce and this code is doing nothing to my product tabs...

function woocommerce_template_product_description() {
wc_get_template( 'single-product/tabs/description.php' );
}
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_product_description', 30 );

@paradoxicalNL
Copy link

If you are looking for a way to do this in avada with css;

https://gist.github.com/paradoxicalNL/a41bc9012a797989e053f5ee7be15883

@webmaya
Copy link

webmaya commented Feb 10, 2020

Hello there, I did the same thing as instructed and i got the description to show after the single product summary, but now i need to set the product tabs after this descprtion, whats the workaround for that,? My current code is
function woocommerce_template_product_description() {
woocommerce_get_template( 'single-product/tabs/description.php' );
}
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_template_product_description', 20 );
add_filter( 'woocommerce_product_tabs', 'sd_remove_product_tabs', 98 );
function sd_remove_product_tabs( $tabs ) {
unset( $tabs['description'] );
return $tabs;
}

@dudegokul
Copy link

https://aceplugins.com/content/uploads/woocommerce-hide-tabs-display-content-display-content.png
i,m using porto theme which was paid version and using woocommerce i want to Hide the Product Tabs, Simply Show the Contentsas i have share screenshot please help me someone .

@shelleyhoward
Copy link

I am trying to also add back in the additional information content to appear immediatley after the description content, but it is not working. I tried:

// Output: adds additional information to below description
function woocommerce_template_product_additional_info() {
woocommerce_get_template( 'single-product/tabs/additional-information.php' );
}
add_action( 'woocommerce_product_additional_information', 'woocommerce_template_product_additional_info', 21 );

Any suggestions? TIA!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment