Creating Commenting System with Elementor and JetReviews plugin
Have you wondered how to add a comments section to your Elementor website? In this article, I’ll follow the recent tutorial about creating a commenting system with Elementor and JetReviews plugins.
JetReviews is the premium review and commenting plugin from the Crocoblock team.
The plugins we need for the tutorial:
➡Elementor free version
➡ Crocoblock Subscription (or Elementor PRO) for Theme Builder
Before starting, I’ve made a Crocoblock subscription installation with the Crocoblock wizard, and we can proceed with creating a comments section in Elementor.
Creating Elementor Commenting Section Guide
Steps:
#4 Create and design Single Post Page template
#1 Set up reviews post source
Go to JetReviews -> Settings -> Post Source, and toggle in Use review for post type:
I’ve also set comment approval for everyone, to avoid spamming.
Settings are saved automatically.
#2 Add Review Type
Then, we need to create a review type for our comment section. For this, go to JetReviews -> Review Types -> Add New
I’ll name it “Comments for Posts” to differ from the default WordPress commenting system.
Then, I’ll add a new field, “Rate the article”, to let the user rate the article and press Add Type.
And we are done with creating review type (we don’t need to come to this section unless we want to edit something):
#3 Assign review type
Now we need to return to JetReviews Settings to assign the newly created review type:
#4 Create and design Single Post Page template
We need to set the Single Post Page template only once for making a template of all my posts.
You can use Elementor Pro for creating Single Post Page templates or use Theme Builder included in Crocoblock Subscription.
In this tutorial, I’m using a Crocoblock subscription.
To create a Single Post Page template, go to the Crocoblock tab, choose Theme Builder, and press Add New button:
Then, select page type and name it appropriately (I’ve called my template “My Comments” just for example, but primarily it’s the template for our blog posts):
After this, we are automatically redirecting to the Elementor page builder for creating our Single Post Page template. I want to keep my blog page simple, so I’ve added:
- Title using Dynamic Field widget by JetEngine:
- Content using Dynamic Field widget too:
- Comments by adding Reviews Listing widget:
Then we need to
Now, we are ready to publish our single post page template.
#5 Edit comments section
Go to your website, and leave a test review, to be able to edit the comments section.
👉Note: Primarily, review is the first comment your visitor leaves, and comments are the replies to the review. But I want to change review naming to comments and comments to replies :)
It’s doable in the reviews listing -> content -> labels.
I also want to change the Rating Layout from stars to points (as I think it’s more appropriate for the article comments).
And make some styling (change color, font, buttons, etc.):
#6 Final results
That’s it; we now have a commenting system in our blog posts:
And here is how Write a comment section looks from frontend:
Moreover, what I like about JetReviews it’s the ability to allow your user to rate the comment (like/dislike):
#7 Comments dashboard
After creating a review section with JetReviews, we can check all article reviews/comments in the dashboard:
- JetReviews page shows reviews visually:
- Review list tab: to approve/edit/delete reviews:
- Comments show all comments to your reviews
Sum Up
This quick and simple tutorial is only the start of creating your commenting system in WordPress, and possibilities are unlimited in styling and customization of your comments section.😊
💪Here are valuable resources used to create a commenting system with Elementor and JetPlugins:
