A trivial, but important customization, here's how to display WooCommerce Reviews outside of the standard product tabs.
A secret that some may not know, WooCommerce reviews functionality is actually just a dressed up a version of the general WordPress comments system. It just attaches additional fields such as the stars, and then styles that to look like reviews.
If you want to move WooCommerce reviews to a custom position on the page, or outside of the standard product tab location, doing that can be done relatively easily. This is a two-step process where first you disable the reviews tab, and then place the product reviews in a custom position on the page.
This is an optional step, but most times people want to remove the Reviews from the product tabs, and display them elsewhere. If you want to keep the comments in the product tabs and display another instance of them, that may become complex and we haven’t had any experience with that. To remove the reviews tab, all you need to do is add this code to your functions that PHP or by using a script manager like Advanced Scripts.
// Disable product review (tab) function woo_remove_product_tabs($tabs) { unset($tabs['description']);
// Remove Description tab unset($tabs['additional_information']);
// Remove Additional Information tab unset($tabs['reviews']);
// Remove Reviews tab return $tabs; } add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
Code language: JSON / JSON with Comments (json)
With that standard comments shortcode, you can place the default word press comments feature anywhere in a single post. This is then replaced by the reviews feature that ships with WooCommerce standard.
<code>/**
Display the comment form via shortcode on singular pages
Remove the default comment form.
Hide the unwanted "Comments are closed" message with CSS.
*
@see http://wordpress.stackexchange.com/a/177289/26350
*/
add_shortcode(
"wpse_comment_form",
function ($atts = array(), $content = "") {
if (is_singular() && post_type_supports(get_post_type(), "comments")) {
ob_start();
comment_form();
print(".no-comments { display: none; }
");
add_filter("comments_open", "__return_false");
return ob_get_clean();
}
return "";
},
10,
2
);</code>
Code language: PHP (php)
Now that you have the shortcode set up, all you need to do is place it into a standard shortcode element anywhere within your page.
Note, this code was sourced from a StackOverflow Article, and we haven’t used it as of word press version 5.5. If it no longer works, let us know in the comments section, and we will update the article accordingly.
If you want to skip that method entirely, and are comfortable editing the PHP that makes up your single product template, it’s even easier than this. To load WooCommerce reviews outside of a product tab, use the native comments_template() function. throw it anywhere in the PHP template that makes off your product, and you’re golden.
Also, if you’re looking to move the will commerce reviews out of the products tab and to a custom position using a page builder like Elementor or Oxygen, simply place a comments element. The comments element will then be overridden by the single product template, which intern applies the reviews functionality and styling to it.
Yet another option for placing reviews in a custom Placement within a WooCommerce single product, without using a page Builder, would be by installing the YITH product reviews pro plugin which comes with its own short code.
Of course, you wouldn’t only install this because it has a short code, as it’s a premium Plugin, but if you’re looking for advanced features such as image uploads, of votes, and more, that extended the basic functionality of the WooCommerce reviews system, check out that plugin.
Hi, thanks for sharing this. I used the code but the standard WP comment form doesn't get replaced by WooCommerce reviews form. I also get ".no-comments { display: none; }" under the button.