I've hunted high and low how to move reviews tab and bring it below product description.
How can this be done with CSS or plugin?
And reviews will be shown 25 at once with read more button that opens another 25 reviews.
Woocommerce uses jQuery (Javascript) to put reviews and content descriptions in separate tabs.
In this tutorial I use Javascript to put wordpress comments below the content after page loading has finished. For this do fast as I did in my wordpress sample page.
Go to header.php
file in your themes, edit <body>
tag to include <body>
tag onload="myFunctiondf()"
then it looks like below :
<body onload="myFunctiondf()">
or if you have class in your theme looks like this :
<body <?php body_class(); ?> onload="myFunctiondf()">
Now go to footer.php
, include this code before </body>
which looks like this:
<script>
function myFunctiondf() {
document.getElementById("tab-reviews").style.display="block";
document.getElementById("tab-description").style.display="block";
document.getElementById("tab-title-reviews").style.display="none";
document.getElementById("tab-title-description").style.display="none";
}
</script>
</body>
Congratulation from now your product pages works as mine.
The following link from the WooCommerce docs should help you: https://docs.woocommerce.com/document/editing-product-data-tabs/
Re-ordering Tabs:
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {
$tabs['reviews']['priority'] = 5; // Reviews first
$tabs['description']['priority'] = 10; // Description second
$tabs['additional_information']['priority'] = 15; // Additional information third
return $tabs;
}