How To Create A Product Reviews Shortcode Query

This particular shortcode will only work on the single product view. Modification would be needed to make it work elsewhere within the website. In case you’re wondering how this would even be useful on product pages, take a look at my article on how beaver builder was added to product pages.

 

The Shortcode

To do this we set the $product as global in order to grab the id of that product so we can use it in the query arguments. WooCommerce reviews are basically just “comments” so we use get_comments to retrieve these.

Be sure to use ob_start and ob_get_clean or you’ll have some trouble with placement when the output is returned.

 

The CSS

@media screen and (min-width: 768px) {
  #gs-reviews ul {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
  }
  #gs-reviews ul > li {
   width: 30%;
   flex-direction: column-reverse;
  }
}

 

Check out how everything turned out in the image below. In addition, you can read about how I added the “Write your review” link under the product title.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *