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.
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.
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.
Find the Reviews Listing widget in the widget panel of Elementor page builder and drag-and-drop it to the page.
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:
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.
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.
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.
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.
In the Labels section, you can type in the titles and placeholders for all the parts of the review block.
In the end, you just have to work on the design in the Style tab. Here’s an example of what you can create:
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!