Adding Product Content Description Above the Product in WooCommerce

By default in WooCommerce the product description of a product sits inside the ‘Description’ tab, with the Short Description displayed more prominent alongside the product. Here is how to swap that order and display the product content at the head of the page and remove the tab description (…as it will display twice).

woocommerce-product-description

So in the above I want to swap the Product Description and make it more of a Sales Page, I realise that you could do this with a product short code on a sales page but in this instance it needs to be done on the actual Product Page.

Add this in your functions.php file

<?php //<~ don't add me in
add_action( 'woocommerce_before_single_product', 'themeprefix_woocommerce_template_product_description', 20 );
/**
* Add product description above product
* Output description tab template using 'woocommerce_before_single_product' hook
*/
function themeprefix_woocommerce_template_product_description() {
wc_get_template( 'single-product/tabs/description.php' );
}
add_filter( 'woocommerce_product_tabs', 'themeprefix_woo_remove_product_tabs', 98 );
/**
* Remove WooCommerce Description Tab
*/
function themeprefix_woo_remove_product_tabs( $tabs ) {
unset( $tabs['description'] ); // Remove the description tab
return $tabs;
}

woocommerce-product-description-template

So now above the content order is swapped and the description tab is removed, just need some CSS styling to tweak the layout, this also now makes it easier to use with a builder such as Beaver Builder.

Leave a Comment





%d bloggers like this: