WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How to Display WooCommerce Product Reviews on Custom Page with a Shortcode

Posted on

By default with WooCommerce, product reviews display by default in the ‘Reviews’ tab in a single product page. What we are going to show you today is how you can display them on any page of your website using a shortcode. This can be especially useful if you are using custom sales pages and need to show reviews on specific pages about a certain product.

So let’s dig into this…

Creating the WooCommerce Product Reviews Shortcode

Firstly, we need to add some code to our functions.php file:


/**
 * WooCommerce Product Reviews Shortcode
 */
 
add_shortcode( 'product_reviews', 'silva_product_reviews_shortcode' );
 
function silva_product_reviews_shortcode( $atts ) {
    
   if ( empty( $atts ) ) return '';
 
   if ( ! isset( $atts['id'] ) ) return '';
       
   $comments = get_comments( 'post_id=' . $atts['id'] );
    
   if ( ! $comments ) return '';
    
   $html .= '<div class="woocommerce-tabs"><div id="reviews"><ol class="commentlist">';
    
   foreach ( $comments as $comment ) {   
      $rating = intval( get_comment_meta( $comment->comment_ID, 'rating', true ) );
      $html .= '<li class="review">';
      $html .= get_avatar( $comment, '60' );
      $html .= '<div class="comment-text">';
      if ( $rating ) $html .= wc_get_rating_html( $rating );
      $html .= '<p class="meta"><strong class="woocommerce-review__author">';
      $html .= get_comment_author( $comment );
      $html .= '</strong></p>';
      $html .= '<div class="description">';
      $html .= $comment->comment_content;
      $html .= '</div></div>';
      $html .= '</li>';
   }
    
   $html .= '</ol></div></div>';
    
   return $html;
}

Adding the Shortcode

Once you’ve added the code to your functions.php file, we can now use the following shortcode on any page you like; [product_reviews id="ID"].

Simply replace the text ID with the product for which you want to output your customer reviews and that is simply all there is to it!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

18 thoughts on “How to Display WooCommerce Product Reviews on Custom Page with a Shortcode”

  1. I don’t quite understand with your last statement
    “Simply replace the text ID with the product for which you want to output your customer reviews and that is simply all there is to it!”

    I had no idea what to replace and where I’ll get the ID.

    Reply

    1. Hi Nico,

      Apologies for this, to get the ID you can use the following code:

      
global $product;
$id = $product->get_id();

      So what you would do then is replace [product_reviews id="ID"] with [product_reviews id="'.$id.'"]

      If you are wanting to add it within a page template, you would use echo do_shortcode('[product_reviews id="'.$id.'"]');

      Does that help?

      Reply

    1. Yes, inside the foreach loop you can do the following:


      // Get the Date Value
      $date = ($comment->comment_date);
      // Convert Value to DateTime
      $date = new DateTime($date);
      //Display Date in new Format
      echo $date->format('d-m-Y H:i:s');

      You can check the date format here if you need it in a different way.

      Reply

    1. Yes you can do this, take a look at the documentation for shuffle(). It takes a reference to an array and shuffles it in place. So you need to use it on the array, then iterate:

      Here is a basic example of usage:

      <code class="language-PHP">
shuffle($something);

foreach ($something as $data) {
        echo $data;
}
</code
      Reply

  6. hello,how to make woocommerce product reviews in a single page,ervey product has its review page in one single page,when one product has many reviews show read more link,we click read more,and visit the product review page,which can use yoast SEO plugin to make SEO title and others,I read your blog something like my ideas.

    Reply

    1. I’d assume you can just update the following code below:

      
I'd assume you can just update the following:

<pre class="prettyprint"><code class="language-PHP">
$comment_inc = 0;
foreach ( $comments as $comment ) {  
   if($comment_inc < 5) { 
      $rating = intval( get_comment_meta( $comment->comment_ID, 'rating', true ) );
      $html .= '<li class="review">';
      $html .= get_avatar( $comment, '60' );
      $html .= '<div class="comment-text">';
      if ( $rating ) $html .= wc_get_rating_html( $rating );
      $html .= '<p class="meta"><strong class="woocommerce-review__author">';
      $html .= get_comment_author( $comment );
      $html .= '</strong></p>';
      $html .= '<div class="description">';
      $html .= $comment->comment_content;
      $html .= '</div></div>';
      $html .= '</li>';
   }
   $comment_inc++;
}

      Just adding an incremental value and then just displaying 5 within the foreach loop.

      Reply

  9. Hi Nathan,

    Thank you for this shortcode it’s exactly what i needed ! It works fine when i specify the ID.
    I try to get automatically the id product but i don’t know where to put the code you gave :

    global $product;
    $id = $product->get_id();

    Can you give me the full code please.

    Reply

  10. Hi! This is mostly working great, just a few more tweaks. I am wondering if I can set up comment moderation and only show reviews after I approve?

    Reply

Join the discussion