Up-sells in a tab

Yes, you can add this code to your theme’s functions.php file:

// Remove the WooCommerce Upsell hook
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );

// Add a custom action to display Upsells
add_action( 'growdev_after_single_product_summary', 'woocommerce_upsell_display', 15 );

// A filter to add a custom tab
add_filter('woocommerce_product_tabs','growdev_add_tab');

// Callback for add_filter that defines the filter. You can change 'New tab' to the desired
// tab title
// growdev_custom_tab is the function callback
function growdev_add_tab( $tabs ) {
	$tabs['upsell_tab'] = array( 'title' => 'New tab',
								 'callback' => 'growdev_custom_tab');
	return $tabs;
}

// The function callback for the custom tab.
// This does the display upsells action inside of the tab
function growdev_custom_tab( $key, $tab ) {

	do_action('growdev_after_single_product_summary');

}

This is what it looks like on the new tab: https://esp.im/image/42270J2x3G0A
And on other tabs the upsells are hidden: https://esp.im/image/070X1d182E2x

Daniel, you are a genius. Thank you very much for this snip-it.

Couple of problems, and this may be that I am using 2.1.2

I have renamed the tab “Related Tests” to suit my needs and that works fine.

1. The problem is that: remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_upsell_display’, 15 ); does not remove Upsell below the description.

2. Is there any way to rename the “You may also like…” to “Related Tests”? or remove “You may also like…” altogether.

I can add this to my css…
.upsells h2 {display: none;}
.upsells {margin-top: 1.5em;}

But I am sure there is a better way.

https://www.buyatestkit.com/products/5-panel-urine-drug-test/

Thank you for help in this matter, I really appreciate it.

Bob

I tested using WooCommerce 2.1.2 (status report) so it should work with that version.

1. Looks like the upsell might be added by your theme? Switch to TwentyFourteen theme and see if it is gone.

2. Looks like you got this hidden just fine: https://esp.im/image/2l3G0j2f2p0I
You may need to clear your browser cache to see it.

Hi again, found the problem.

I am using canvas and found this did the trick… remove_action( ‘woocommerce_after_single_product_summary’, ‘woo_wc_upsell_display’, 15 );

Its now working as I wanted. Thanks so much

Bob

Glad it’s sorted!

Hi, how do you change the location of the tab?

I added ( ‘priority’ => 29, ) Copy and paste the code between >>

>>

// Remove standard Related Products section
remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_related_products’, 20 );
// Remove the WooCommerce Upsell hook
remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_upsell_display’, 15 );
remove_action( ‘woocommerce_after_single_product_summary’, ‘woo_wc_upsell_display’, 15 );
// Add a custom action to display Upsells
add_action( ‘growdev_after_single_product_summary’, ‘woocommerce_upsell_display’, 15 );

// A filter to add a custom tab
add_filter(‘woocommerce_product_tabs’,’growdev_add_tab’);

// Callback for add_filter that defines the filter. You can change ‘New tab’ to the desired
// tab title
// growdev_custom_tab is the function callback
function growdev_add_tab( $tabs ) {
$tabs[‘upsell_tab’] = array( ‘title’ => ‘Related Products’,
‘priority’ => 29,
‘callback’ => ‘growdev_custom_tab’);
return $tabs;
}

// The function callback for the custom tab.
// This does the display upsells action inside of the tab
function growdev_custom_tab( $key, $tab ) {

do_action(‘growdev_after_single_product_summary’);

}

>>
You can change… ‘priority’ => 29, from 25 to 29 and this will move the tab placement.

Hi Mate,

I couldn’t manage to display number of products correctly when applies the tab code. It supposes displays 4 related products instead of 2. It works fine before apply the tab code. Below are the url and the source:

https://www.regen2u.com/enko/?product=blue-color-iphone-5-iphone-5c-iphone-5s-case

[ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

add_action( 'growdev_after_single_product_summary', 'woocommerce_output_related_products', 20 );

add_filter('woocommerce_product_tabs','growdev_add_tab');

function growdev_add_tab( $tabs ) {
$tabs['upsell_tab'] = array( 'title' => 'You may also like',
'priority' => 39,
'callback' => 'growdev_custom_tab');
return $tabs;
}

function growdev_custom_tab( $key, $tab ) {
do_action('growdev_after_single_product_summary');

if ( !function_exists( 'woocommerce_output_related_products' ) ) {
 	function woocommerce_output_related_products() {
 		woocommerce_related_products( 4,4  );
 	}
 }

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_upsells', 15 );

if ( !function_exists( 'woocommerce_output_upsells' ) ) {
 	function woocommerce_output_upsells() {
    woocommerce_upsell_display( 4,4 );
 	}
 }
}

Can help to verify whether I did something wrongly in the code?

Thanks in advanced!