How To Display WooCommerce Reviews Outside Of Tabs

Published: 6 months ago

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.

Remove The Reviews Tab In The WooCommerce Product Tab

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 );

Set Up A Standard Comments Shortcode

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.

/**
 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
 );

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.

An Even Easier Way To Custom Position WooCommerce Reviews

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.

Custom WooComments Positioning on Elementor And Page Builders

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.

YITH Product Reviews Pro Alternative

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.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Ezoicreport this ad
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Joanna
Joanna
4 months ago

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.

IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

Ezoicreport this ad
A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram