WooCommerce: Related Products in a Tab on the Product Page

This is a simple snippet that will allow you to move the Related Products from below the tabs to inside the single product tabs, in a brand new tab.

WooCommerce Related Products Tab
WooCommerce Related Products Tab

PHP Snippet: Move Related Products to a Tab – WooCommerce


/**
 * @snippet       Checkbox to display Custom Product Badge Part 1 - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @source        https://businessbloomer.com/?p=17419
 * @author        Rodolfo Melogli
 * @compatible    Woo 3.5.3
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

// First, let's remove related products from their original position

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

// Second, let's add a new tab

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );

function woo_new_product_tab( $tabs ) {
	
$tabs['related_products'] = array(
	'title' 	=> __( 'Try it with', 'woocommerce' ),
	'priority' 	=> 50,
	'callback' 	=> 'woo_new_product_tab_content'
);
	return $tabs;
}

// Third, let's put the related products inside

function woo_new_product_tab_content() {
woocommerce_output_related_products();
}

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials. You can start learning how to customize WooCommerce without unnecessary plugins. Watch me code and learn by example!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

8 thoughts on “WooCommerce: Related Products in a Tab on the Product Page

  1. Hi, can you please confirm if this code still works on the latest WP/WC update? I tried just copying and pasting your exact code into my functions.php, and nothing shows up on the frontend.

    Thanks!

    1. Hey Harv, positive, still works ๐Ÿ™‚

  2. Awesome … you are great man

  3. The code works well but it shows only 2 related products on me,any thoughts?

    1. Hey Alex, thanks for your comment! You’re right ๐Ÿ™‚ I updated the snippet and it should work now – let me know

  4. Hi there,

    Thanks for taking the time to post this. I was just wondering if you knew of any way to hide Out-of-Stock items from the Woocommerce Related products slider?

    Thank you.

    1. Hey, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

Your email address will not be published. Required fields are marked *