WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

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

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

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

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

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

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

  5. This works great, but I need to add a filter to only display approved reviews. I just found out that spam reviews are showing.

Join the discussion