How to move review and related products into separate tabs woocomerce?

enter image description here

This is how my single product page looks like now.

If you notice in the image above, related product appears below review.
But I want it to appear in another tab content. You see above, there’re two tabs

1) reviews
2) similar products

So I expect the related product to appear only when I click the ‘similar products’ tab.

I manage to remove the related products from review page by doing this in functions.php

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

Now, how do I add this in the second tab?

Here’s my html template.

    <div class="column row">
      <ul class="tabs" data-tabs id="example-tabs">
        <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Reviews</a></li>
        <li class="tabs-title"><a href="#panel2">Similar Products</a></li>
      <div class="tabs-content" data-tabs-content="example-tabs">
        <div class="tabs-panel is-active" id="panel1">
     * woocommerce_after_single_product_summary hook.
     * @hooked woocommerce_output_product_data_tabs - 10
     * @hooked woocommerce_upsell_display - 15
     * @hooked woocommerce_output_related_products - 20
    do_action( 'woocommerce_after_single_product_summary' );
        <div class="tabs-panel" id="panel2">
          <div class="row medium-up-3 large-up-5">
            <div class="column">
             <!-- related products to appear here-->

I found this article,

but I’m unable to get it working on my template. By doing what shown in the article, I get related product and reviews side by side. Can someone walk me through registering custom tab and contents for each of them like shown in the article here?

Read more here: How to move review and related products into separate tabs woocomerce?

Leave a Reply

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