Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetReviews: How to Add Reviews to the Post

This tutorial reveals the full step-by-step instruction on how to add a reviews block to the Single page of chosen Custom Post Type with the help of JetReviews and Elementor plugins.

The JetReviews plugin has all the functionalities to enable the visitors of your site to leave reviews, comment on them, and reply to the comments. You can add any number of assessment criteria to the review text block, style it according to your website’s template design, and place the whole section to any part of the page.

Let’s go through the process of adding step by step.

Creating a Review Type

You can add reviews either to the posts, pages, or custom posts that can be created with the help of JetEngine. By now, you have probably created the Custom Post Type and determined where to site the reviews block. If you need a hint, check out this CPT creation tutorial.

First of all, you have to create a Review Type.

1 Step — Add new Type

Go to the dashboard of your website and open JetReviews > Review Types. Click the “Add New” button, type in the Name, and add necessary Type Fields.

new review type

You can find more details in our Review Type addition tutorial. When you are done, hit the “Add Type” button.

2 Step — Assign the Review Type to the Custom Post Type

Proceed to JetReviews > Settings. Open the tab of the post type where you would like to add reviews (it could be Posts, Pages, or any Custom Post you created). Turn the Use review for post type toggle on.

jetreviews settings

In the Review Type drop-down menu, choose the review type you’ve just created. Define who will be able to add reviews in Allowed roles bar and set the rest of options according to your needs. Find out more details about all the settings of this page in this tutorial.

Adding the reviews block to the post

1 Step — Add the Review Listing widget to the post

The process will be pretty much the same either for Pages or for Posts, so, for example, let’s assume you are going to add reviews to the Custom Post single items. Go to JetPlugins > Theme Builder and find the Single post page template you created for your Custom Post Type. If you don’t know how to create it, check out this Single page template tutorial. Click the “Edit with Elementor” button under the needed Single template.

editing single page in elementor

Find the Reviews Listing widget in the widget panel of Elementor page builder and drag-and-drop it to the page.

JetReviews Reviews Listing widget

By now, there are no reviews there. Click the “Update” button to save changes.

2 Step — Add a review in the front

To do the styling, you need to see what changes you actually apply. So, you’re supposed to add at least one review on the frontend. Return to the dashboard and go to your Custom Post Type tab. Click the “View” button of any item to open it on the frontend. Scroll the page down to the reviews block. It looks quite simple without styling:

review block without reviews and styling appearance

Click the “Write a review” button, fill in the fields, and move the assessment criteria sliders. Be aware that the “Submit a review” button will appear only after filling in the Your review and Title of your review text fields.

review example

When you are done, hit the “Submit a review” button. If you have chosen that every review should be submitted by the admin, you will see a “*Your review must be approved by the moderator” notification. In this case, go to the dashboard and open JetReviews > All Reviews. Find the review you just submitted and click the “Approve” button.

reviews list

3 Step — Define settings and do the styling

Go to the Single template Elementor editing page. Now that you’ve created a review, you will be able to see what you are doing. Let’s get through the Content tab settings sections.

In the Settings section, you will be able to choose a Rating Layout from a drop-down menu. Be aware that if you choose Stars, it will always be a 5-star rating. Even if you’ve set a bigger Max value while adding fields to the review type, they will still be converted to match a five-stars rating. The Points rating layout will just show the value in numbers.

Reviews Listing settings

The Icons section gives you an opportunity to set up icons for all the parts of the rating block. You can choose that there will be no icon, upload your own SVG picture or pick an icon from the library.

Reviews Listing Icons

In the Labels section, you can type in the titles and placeholders for all the parts of the review block.

Reviews Listing Labels

In the end, you just have to work on the design in the Style tab. Here’s an example of what you can create:

reiews example

The review block has a simple structure. On the top, there is a header. It shows the current number of reviews, has a “Write a review” button, and average score.

Every review consists of:

  • author avatar;
  • author name;
  • the time when the comment was left;
  • the average score for this review. If you click the “Details” button, you will see what values the user put for every assessment criterion;
  • title of the review;
  • text of the review;
  • Like,” “Dislike,” and “Leave a comment” buttons.

And that is all for adding a review to the post. Don’t hesitate to play with the style options to achieve the result that will fully satisfy you. Have fun!