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, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

10 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

    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

Join the discussion