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:
Please start developing all your ‘snippets’ as woo commerce extensions. I would love to give you my money!
Ha ha ha! Thanks! ACtually as a WooThemes employee i am not really allowed to do it! ;-)
It’s a shame that all your hard work is hidden in my theme functions file :)
i think i’ll release some free plugins if they are validated by Woo
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?
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
yes that can be done using custom coding and filters.
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?
yes, you’ll need to do it using custom CSS code
I’ve tried to, but it ends up hiding both since they are both div.related.products.cols-2.
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!
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 :-)
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!
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???
Would Also love to move the Custom Related Products tab to the third position??? Any ideas on that?
Leave a Reply
You must be logged in to post a comment.