Place WooCommerce related products in a tab

Remi | August 6, 2013 | in Tutorials

Here is a quick snippet to remove the default related products section on the product page and place a new related products section in a tab still on the product page. Here is the result:


Simply place this code in the functions.php file of your theme folder:

The author

About the author Remi: Hey! My name is RĂ©mi Corson, I'm a French WordPress Developer, I code stuff and I write from time to time ;-)


  1. Stine

    Hi Remi,
    This was just was I was looking for. But is there a way that I can get the code to select the related products I choose woo commerce? Right now I think that the code selects the products which are next to the selected product?

  2. 79pxls

    Hi Remi!
    Great post :)
    I was wondering if it was possible to move the related products to sit under the single product short description?
    Thanks for your time.

  3. erich-j

    This worked great, however, now I have related products in a tab and below the product tabs as well. Is there a way to hide just the div outside the tabs?

  4. coop

    I’m wondering if instead of “related products” a tab could be created for “up-sells” where up-sells for specific products would then be in a tab rather than the “You may also like…” at the bottom of the page. I’d also be interested if it’s possible to place up-sells in a sidebar widget instead of either a tab or page content.

  5. dragnfly

    Hi Remi

    This is a really cool feature.

    Will you think about taking this further to allow for a more responsive layout and give the .woocommerce-tabs a custom column layout so I can list my related products below one another on mobile?

    The current layout for Related Products does not offer this. Perhaps your Tabs method could be a more suitable method.
    Just a thought and hoping you will consider this.

    Thanks for all your tips :-)

  6. hallor

    hi! this was exactly what I was looking for! I want to use it together with the Woocommerce Instagram extension, but I’m struggling with figuring out which function to include instead of ‘woocommerce_related_products’ and ‘woocommerce_output_related_products’
    I tried ‘woocommerce_instagram’ , ‘Woocommerce_Instagram_Frontend’ and ‘maybe_display_instagrams’ but without luck.
    any pointers?

Leave a reply