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:

woocommerce-place-related-products-in-a-tab

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

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 ;-) Buy a coffee
Show your support

Related Posts

15 comments

  1. Dale:

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

  2. Dale:

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

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

  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?

  6. coop:

    Remi,
    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.
    Thanks!

  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?
    thanks!

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

    http://signin.juliegoodnight.com/product/membership-product-for-ftgu-4-ready-to-ride-colt-starting-full-training-dvd/

Leave a Reply