Creating Commenting System with Elementor and JetReviews plugin
Tags: wordpresscomments, elementor, wordpress, elementorplugins
Published: 2022-01-21 14:28:13

---
title: Creating Commenting System with Elementor and JetReviews plugin
published: true
date: 2022-01-14 14:03:12 UTC
tags: wordpresscomments,elementor,wordpress,elementorplugins
canonical_url: https://lanamiro.medium.com/creating-commenting-system-with-elementor-and-jetreviews-plugin-d18ff508f7da
---

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.

{% youtube jVuUOmANZtw %}

JetReviews is the premium review and commenting plugin from the Crocoblock team.

The plugins we need for the tutorial:

➡[JetReviews plugin](https://crocoblock.com/?ref=93&campaign=jetreviews)

➡Elementor free version

➡ [Crocoblock Subscription](https://crocoblock.com/pricing/?ref=93&campaign=jetreviews) (or [Elementor PRO](https://trk.elementor.com/3960)) for Theme Builder

Before starting, I’ve made a Crocoblock subscription installation with the [Crocoblock wizard](https://crocoblock.com/knowledge-base/articles/how-to-install-crocoblock-package-with-crocoblock-wizard/), and we can proceed with creating a comments section in Elementor.

![crocoblock wizard installation](https://cdn-images-1.medium.com/max/1024/1*qY_NRFW2YmUZOAvE8MI0Rw.png)

### Creating Elementor Commenting Section Guide

**Steps:**

[_#1 Set up reviews post source_](#4574)

[_#2 Add Review Type_](#89bc)

[_#3 Assign review type_](#4d39)

[_#4 Create and design Single Post Page template_](#2494)

[_#5 Edit comments section_](#8082)

[_#6 Final results_](#5cee)

[_#7 Comments dashboard_](#d396)

#### #1 Set up reviews post source

Go to JetReviews -> Settings -> Post Source, and toggle in Use review for post type:

![Set up reviews post source](https://cdn-images-1.medium.com/max/1024/1*u24MMSeo08xfwmEBOytFYw.png)

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

![Add wordpress Review Type](https://cdn-images-1.medium.com/max/1024/1*jXfrwcz7gN2OxghPSNjsiQ.png)

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**.

![edit review type](https://cdn-images-1.medium.com/max/1024/1*lGzgan0DWlmJBX9GT55NXg.png)

And we are done with creating review type (we don’t need to come to this section unless we want to edit something):

![review types dashboard](https://cdn-images-1.medium.com/max/1024/1*7TXbKoD36bjpMf7xjw0caA.png)

#### #3 Assign review type

Now we need to return to JetReviews Settings to assign the newly created review type:

![Assign review type](https://cdn-images-1.medium.com/max/1024/1*gbE629u4bXME860SC74-gg.png)

#### #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**](https://crocoblock.com/plugins/jetthemecore/?ref=93&campaign=jetreviews), and press **Add New**  button:

![create single page template](https://cdn-images-1.medium.com/max/886/1*SnsC_AeC-ghThNZfL7J6Rw.png)

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):

![select template type](https://cdn-images-1.medium.com/max/1008/1*1lA92Frrw7dlWjusRrrARg.png)

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:

![dynamic field widget](https://cdn-images-1.medium.com/max/1024/1*DCCGmXPQKOLMZ_VwdsMoWg.png)

- Content using Dynamic Field widget too:

![add content via dynamic field widget](https://cdn-images-1.medium.com/max/1024/1*TyTRqeJ32531nmFfKN62tA.png)

- Comments by adding Reviews Listing widget:

![adding reviews listing to the template](https://cdn-images-1.medium.com/max/299/1*ZRam9cckFeSS-EkHGM0TAQ.png)

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).

![customize wordpress comments section](https://cdn-images-1.medium.com/max/1024/1*xoRFaKpDO1ManGigI3sKuQ.png)

And make some styling (change color, font, buttons, etc.):

![edit comments styling](https://cdn-images-1.medium.com/max/294/1*fYsaTDNGmklaBd1ia8JW4Q.png)

#### #6 Final results

That’s it; we now have a commenting system in our blog posts:

![wordpress comment system example](https://cdn-images-1.medium.com/max/893/1*bKfWbBawALdBp5pZd543PQ.png)

And here is how **Write a comment** section looks from frontend:

![Write a comment section wordpress](https://cdn-images-1.medium.com/max/803/1*-Xo2z2YrReiimzRYQiNXuA.png)

Moreover, what I like about JetReviews it’s the ability to allow your user to rate the comment (like/dislike):

![](https://cdn-images-1.medium.com/max/411/1*FRHLmrID34PpGPbaIAiEyA.png)

#### #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:

![jetreviews dashboard](https://cdn-images-1.medium.com/max/1024/1*G-Mfq6Yf3M599eaSKBLU4A.png)

- Review list tab: to approve/edit/delete reviews:

![review list dashboard approve comments](https://cdn-images-1.medium.com/max/1024/1*FP-4AAytUXRnN71Ku53MKQ.png)

- Comments show all comments to your reviews

![JetReviews Comments list](https://cdn-images-1.medium.com/max/1024/1*5v0qW0Nm3vhQu8UsRPGQ3g.png)

### 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:

- [JetReviews overview](https://crocoblock.com/knowledge-base/articles/jetreviews-how-to-add-reviews-to-the-post/)
- [How to add the review type](https://crocoblock.com/knowledge-base/articles/jetreviews-how-to-create-a-new-review-type/) and [attach it to the custom post type?](https://crocoblock.com/knowledge-base/articles/jetreviews-how-to-create-a-new-review-type/)
- [How to add a single post page template with JetThemeCore?](https://crocoblock.com/knowledge-base/articles/how-to-add-a-single-post-page-template-with-elementor/)