Want to move the product tabs below the product summary

Hi @davidw09,

You’re doing the right thing! Using the filter is definitely the recommended way to go about changing the placement of the tabs.

I can see that your theme is using a custom tab layout but that filter should work for our tabs too; they’re in the same HTML block as the default tabs.

What did the page look like when you added it? Do you have a staging site (or screenshot) where I could see that change?

Let me know.

Thank you,
Kevin.

Hey so without my css it just doesn’t move

here is the site that it is currently on that is not live

https://luminanceskin.wpengine.com/product/hydration-facial-moisturizer/

Hey so I figued it out it was a plugin that was making the tabs look like an accordian. It had a setting to move the tabs that was not working so I disabled the plugin and coded it myself.

Thanks.

Excellent! Let me know if you need anything else.

Reviving an older thread on the same topic.

I would like to move the custom tab higher in the display order so that it is the next tab below the product description.

I’ve tried numerous different codes in my child theme’s functions.php file, but as the OP mentioned, the changes only affect the default WooCommerce tabs.

Perhaps @yikesitskevin or someone else can share the code that they used to change the order of the tabs including the plugin tabs?

Excellent plugin BTW!

TIA!

• This reply was modified 5 years, 7 months ago by richsadams.

Hey @richsadams,

You can reorder your tabs like so..

/**
 * Reorder product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {

	$tabs['reviews']['priority'] = 5;			// Reviews first
	$tabs['description']['priority'] = 10;			// Description second
	$tabs['additional_information']['priority'] = 15;	// Additional information third

	return $tabs;
}

If you’re unfamiliar with a filter this just allows you to filter things and change them before they’re displayed. In this case you can see that we’re receiving the $tabs variable and setting priorities for different tabs. You can change this around to modify your order in your theme.

Hopefully this helps!

– Freddie

Thanks Freddie, that’s terrific!

I actually sorted it out yesterday and was going to post back today. I’m using the Flatsome theme so the tab names are slightly different (and that’s what was throwing me off), but the principle is the same.

This is the code I ended up using and it works perfectly:

/**
 * Reorder single product tabs.
 */

add_filter( 'woocommerce_product_tabs', function ( $tabs ) {
	$tab_list = [
		'description'            => 10,
		'installation-instructions' => 20,
		'ux_custom_tab'          => 30,
		'ux_video_tab'           => 40,
		'ux_global_tab'          => 50,
		'reviews'                => 60,
	];

	foreach ( $tab_list as $tab => $priority ) {
		if ( isset( $tabs[ $tab ] ) ) {
			$tabs[ $tab ]['priority'] = $priority;
		}
	}

	return $tabs;
}, 98 );

Thanks again… I know this will help others that follow.

@richsadams I like that approach nice code!

Thanks @fmixell.

FWIW my client didn’t want the “Additional Information” tab to display at all, so I added the following to the child theme functions.php file:

// Remove Additional Information Tab WooCommerce
 
add_filter( 'woocommerce_product_tabs', 'remove_info_tab', 98);
function remove_info_tab($tabs) {
 
 unset($tabs['additional_information']);
 
 return $tabs;
}

Thanks again and keep up the great work!

Hello! I’d like to ask as well – my tabs are below the product image

https://tinyurl.com/r77zsvw and I want to put them up here:
https://tinyurl.com/yj4gnpbj

I did get them there through a plugin WC Builder but then it messes up the price and other options on the page, and I know that using the correct PHP is the best way to move the tabs. Can you help?

Thank you,

Luke