How to Show WooCommerce Reviews on Your Homepage

Displaying customer reviews on your homepage is one of the most effective ways to build trust and boost conversions. With the Site Reviews plugin, you can easily showcase authentic feedback from your buyers without touching a single line of code. Whether you’re using shortcodes, widgets, or page builders like Elementor, the setup is quick and beginner-friendly.

In this in-depth tutorial, I’ll walk you through:

• Installing and setting up the Site Reviews plugin
• Using shortcodes, widgets, and Gutenberg/Elementor blocks to pull review highlights
• Pinning your best reviews to make sure they appear first
• Enabling settings like spam protection, review approval, and review verification.
• Styling options to match your site’s look & feel

✅ Why Site Reviews?
This plugin provides one of the most feature-rich free review systems available—complete with spam protection, review verification, and structured data support—making it ideal for showcasing trusted feedback on your homepage.

Install & Setup

First, we need to install & active the plugin site reviews on your WordPress website from the lick Click Here to download

Submit Review Form & Review List Page

We can show review form and review list on this page using these shortcodes

Review Form Shortcode Below

[site_reviews_form hide="email,terms,title"]

Review List Shortcode Below

[site_reviews pagination="ajax" display="5" hide="title"]

Shortcode for Homepage

You can show 3 column review list using the shortcode.

[site_reviews pagination="ajax" display="3" hide="title"]

Some Css to Improve Design

To imporve the review box design, you can use the shortcode below.

/* Product Review*/
.custom-reviews-container .glsr-reviews{
    min-height: 100%;
  display: flex;
  flex-wrap: wrap;
    justify-content: space-between;
}
.custom-reviews-container .glsr-review{
  flex-basis: 31%;  
}
.woocommerce div.product #reviews #review_form_wrapper {
    margin-top: 20px;
}
.woocommerce-review__verified.verified {
    background-color: black;
    padding: 3px 10px;
    border-radius: 10px;
    color: #fff;
    font-style: normal;
    font-size: 12px;
}
.glsr-reviews .glsr-review {
    background: #eeee;
    padding: 15px;
    border-radius: 10px;
}
.glsr-review-avatar img {
    border-radius: 50%;
}
.glsr-reviews .glsr-review-author {
    font-weight: bold;
}
a.page-numbers, .page-numbers {
    background: #eeee;
    padding: 5px 20px;
    border-radius: 5px;
    text-decoration: none !important;
}
/* Responsive for mobile*/
@media screen and (max-width: 921px){    
 .custom-reviews-container .glsr-review{
   flex-basis: 100%;
 }    
}

If you found this tutorial helpful, don’t forget to watch the full video, give it a thumbs up, and subscribe to our YouTube channel for more WordPress and WooCommerce tutorials. Got questions or want help with something specific? Drop a comment below or reach out — we’re here to help!