Custom HTML template for your reviews feed

The standard delivery of the business plugin includes many themes like a list, slider, grid, badge and others. But what do you do when none of them fit your site design? In this case, a great plugin feature called a custom template comes to the rescue.

In short, the feature allows you to use variables in your HTML template to display ratings and reviews. I want to note that this feature is not new, but before version 1.8 it was possible to display only the rating, number of reviews, company name, business photo, in general, only what relates to the rating and information about the place/business. Starting with version 1.8, we added a template for reviews too!

Where I can use this feature

Ok, for instance, you have created a collection, connected your Google and Facebook reviews and wish to use a custom template. We expand the options for that in a separate section which called a 'Template Options':

And if you click by 'Use custom HTML template' the next two checkboxes are also checked, the first for a rating template and the second for a reviews. Of course you can turn off any of them to leave only a reviews or ratings:

Please pay attention that the code, which you see in a textareas, is just a default HTML templates and you can write there your own. The default templates for a rating's header and reviews block are:

<span class="rplg-rating">
  {{photo}}
  <a href="javascript:_rplg_popup('{{writereview_url}}',620,580)">{{name}}</a>
  <span>
    {{stars}}
    <span class="rplg-rating-info">
      {{rating}} Stars - <a href="{{reviews_url}}" target="_blank">{{count}} Reviews</a>
    </span>
  </span>
</span>

<br>
<div class="rplg-review">
  <div>
    {{review_photo}}
    {{review_name_url}}
    {{review_time}} {{review_badge}}
  </div>
  <div>
    {{review_stars}} {{review_text}}
  </div>
</div>

In each template's code are available the following variables:

Small example

For instance, redefine these and write my own, let it be something very simple and we got, not to say that it is very beautiful, but the correct result:

<div class="rplg-rating">
  {{name}}: {{rating}} {{stars}} out of <a href="{{reviews_url}}" target="_blank">{{count}} Reviews</a>
</div>

<br>
<div>{{review_photo}} {{review_name_url}}</div>
<div>{{review_stars}} {{review_text}}</div>

Live sample

Let's try to implement masonry view. First of all, defines a CSS code. By default, the reviews block is rendering into container with a class rplg-reviews and we need to know this to add a flex style to that. Also, each review is displaying into a separate container with a rplg-review class and it should be a row in a flex style's. After that we can define a content in a box container.

.rplg-reviews {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it
   * needs to be taller than your tallest column. */
  height: 5000px;
}

.rplg-review {
  width: 32%;
  margin-bottom: 2%;
}

.rplg-review:nth-child(3n+1) { order: 1; }
.rplg-review:nth-child(3n+2) { order: 2; }
.rplg-review:nth-child(3n) { order: 3; }

.rplg-reviews::before,
.rplg-reviews::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}

.box {
  background: #fff;
  margin: 10px !important;
  padding: 20px !important;
  border-radius: 3px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

.box .content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
}

.box .info .name {
  font-weight: 600;
  font-size: 17px;
}

.box .info .job {
  font-size: 16px;
  font-weight: 500;
  color: #17a2b8;
}

.content .image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #fff;
}

Since there is no ratings header, just turn off it in the collection (Template Options / Include HTML template for ratings). Then define the HTML template into the option Template Options / Review template:

<div class="box">
  <div>{{review_text}}</div>
  <div class="content">
    <div class="info">
      <div class="name">{{review_name}}</div>
      <div class="job">Rate on {{review_badge}}</div>
      <div class="stars">{{review_stars}}</div>
    </div>
    <div class="image">{{review_photo}}</div>
  </div>
</div>

Save the collection, copy & paste a shortcode to the page and we did the trick:

It is just example of course you can use this feature in your templates with own styles and here a lot starts to depend on your experience in web development. However, if you have any questions, please feed free to ask!