[Support request] Description Tabs (Text) below Images

[achims]

Hi,

do anybody have an idea how to change the order on a single product in woocommerce.

I would like to place the description directly below the Images (Thumbnails).

Thanks for any help in this case.

Achim

[David]

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;
}

[achims]

Hi David,

this does not work.

[achims]

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 …

[David]

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 ?

[achims]

You have to scroll down to the description tabs.

<h1 class=”product_title entry-title” ….
…..

Now the product_title is on the right side (because of some css) and as up as the Images.
At the End of the summery there is the description.

With this i can change the tabs to bring them above the title:

// Remove product tabs (description, additional information, reviews)
remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );

// 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’, 1 );

But now i do not know how to change the css to get the tabs back to the left side …

[David]

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.

[achims]

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

[David]

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

[achims]

This looks great.

The order is now as it should be.

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

[achims]

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!

[David]

Awesome – that CSS method is the simplest method there is – i like it 🙂

[achims]

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

[David]

You’re welcome

[Author]

Posts