isotropic-2022
Share
Blog
Search
Menu

How To Display WooCommerce Reviews Outside Of Tabs

By James LePage
 on December 30, 2020
Last modified on January 6th, 2022

How To Display WooCommerce Reviews Outside Of Tabs

By James LePage
 on December 30, 2020
Last modified on January 6th, 2022

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 );Code language: JSON / JSON with Comments (json)

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.

<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.

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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Joanna
Joanna
3 years 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.

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram