Whilst working on a client’s website, I was frustrated by the fact that Woocommerce puts the reviews form at the bottom of the reviews tab, meaning if you have a lot of reviews then it’s very hard to get people to review your product because they have to scroll so far to do it! I couldn’t find a workaround on the interwebs, so I figured this one out all by my very self.

Woocommerce Single ProductsMove it to a new tab

Essentially what you’re trying to do is de-couple the reviews form from the reviews tab. In order to do this we have to make new versions of standard Woocommerce pages and save them into our child theme (you do have a child theme right?).

After searching around I found the product reviews master code on Github. At the top of the page, you’ll see the comments that tell you how to create your own version of this page and where to place it in your site. I went to my FTP program (Filezilla, since you ask), connected to my server, navigated to the child theme, created the woocommerce folder and then created a new file and called it product-single-reviews.php. I then opened it in BBEdit and added the master code from Github.

Woocommerce new file child themeRemove the form, create a new page

This is the key part of the process. Navigate down the new code you’ve pasted into the page and look for at line 113 and cut it out of the document. Now go back to your FTP program and navigate back to the main child theme folder and create another file (this one I called review-form.php).

Open it in your text editor and paste the information you cut from the product-single-reviews.php page into it. Don’t worry about putting <?php> at the top and bottom of the page as the bits that are php already have that either side of them in the code.

Create the new tab

There are many plugins that create tabs for you in Woocommerce, but for this to work you’re going to have to get into the functions.php file and manually create a new tab there instead. The reason being is that the plugins won’t accept php coding within the text boxes and as you have to use that to get the review form to populate in the tab, it renders them impotent in this particular case.

I used this piece of code I found on the Woocommerce website to add a new tab to the single product page.


add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );

function woo_new_product_tab( $tabs ) { // Adds the new tab

$tabs['test_tab'] = array(

'title' => __( 'New Product Tab', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content' );

return $tabs;

}

function woo_new_product_tab_content() { // The new tab content

echo ' <h2>New Product Tab</h2> ';
echo ' Here\'s your new product tab. ';

} 

Just after the second echo and before the closing curly brace, you need to add the following line of code to pull in the review form that you created above:

include 'review-form.php';

Once that’s in the functions file, save it and go back to one of your product’s pages and you should see a new tab. It’ll be called New Product Tab so we need to change the name to something people will respond to (I used Leave a Review). Go back to functions.php and find the bit that says

'title' =>__( 'New Product Tab', 'woocommerce' ),

and change it to

'title' => __( 'Your Title', 'woocommerce' ),

Once you’ve done that, you should save your changes, go back to the product page and refresh it. Your title should now be visible in the tab.

And Finally

The text that is then put out in the tab itself is run with the echo codes in the functions.php file (lines 17-18 above). You can change that to whatever you’d like and it’ll be included above the review form. Change that and you’re done!