Description Tabs (Text) below Images

Hi there,

try adding this CSS:

.woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary {
    width: 100% !important;
    float: none;
    margin-right: 0;
    margin-left: 0;
}

Hi David,

this does not work.

I think it could be done by hooks and should look nearby this:

// Add product description tab content in new position
function woocommerce_template_product_description() {
woocommerce_get_template( 'single-product/tabs/description.php' );
}
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_product_description', 20 );

But i can not find out the right hooks and templates ...

Just to be clear you want ALL of the Description below the image - Including the title etc ?
As i cannot see the Woo tabs on the page ?

You have to scroll down to the description tabs.

Is there a specific URL where i can see the tabs ?

The URL provided had none:

Also it is really tricky to move the tabs to that position - see the visual hook guide here:

https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

The woocommerce_product_thumbnails hook which would be the place to add it was deprecated - so no longer can it be used.

You would probably need to unhook / rehook the gallery and tabs so they occupy the same container as the summary to do this.

Thanks very much for your help.

Strange that you can not see the Tabs. Maybe you just looked at the page when i have removed (unhooked) it for a short time.

The Information about the deprecated does helps a lot.

And maybe i will try it by your idea to rehook the gallery.

Thanks again!

Achim

OK - thought about and give this a try - it will insert a custom wrapper with the images and tabs within:

// Remove Tabs
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );

// Insert opening of custom wrapper before gallery
add_action( 'woocommerce_before_single_product_summary', function() {
	echo '<div class="custom-woo-wrap">';
}, 15 );

// Rehook tabs and close custom wrapper
add_action( 'woocommerce_before_single_product_summary', function() {
	woocommerce_output_product_data_tabs();
	echo '</div>';
}, 60 );

If it works it will require some CSS = happy to help with

This looks great.

The order is now as it should be.

If you could help with the css it would be great.

I just added this css.

I think it is not very elegant but it works :)

@media screen and (min-width: 800px){
.woocommerce-tabs {
max-width: 40%;
float:left
}

If you know a little bit more elegant way i would be happy to learn how to do it.

Thanks again!

Awesome - that CSS method is the simplest method there is - i like it :)

David, thanks very much for your help. Have a nice day!

You're welcome