Place WooCommerce related products in a tab

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:

15 responses to “Place WooCommerce related products in a tab”

  1. Dale

    Please start developing all your ‘snippets’ as woo commerce extensions. I would love to give you my money!

    1. Ha ha ha! Thanks! ACtually as a WooThemes employee i am not really allowed to do it! ;-)

  2. Dale

    It’s a shame that all your hard work is hidden in my theme functions file :)

    1. i think i’ll release some free plugins if they are validated by Woo

  3. 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?

  4. 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.

    1. yes that can be done using custom coding and filters.

  5. 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?

    1. yes, you’ll need to do it using custom CSS code

      1. erich-j

        I’ve tried to, but it ends up hiding both since they are both div.related.products.cols-2.

  6. 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.

  7. 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 :-)

  8. 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?

  9. dmdwebdesigns

    Love this! I am trying to combine another code snippet forf changing the amount of Related Products to show along with your code to moving them into the tab.

    I am using CSS to downsize the thumbnails and the product spacing so I could fit 3 products side by side…

    however I am still only seeing 2… Any Ideas???

    1. dmdwebdesigns

      Would Also love to move the Custom Related Products tab to the third position??? Any ideas on that?

Leave a Reply