Search

How to Add Dynamic Star Rating in Elementor

Say you want to create a review blog using Elementor. On every review you write, you want to add a unique rating according to the rating you give to the stuff you reviewed. Elementor has a widget called Star Rating. With the help of the ACF (and the similar plugins such as JetEngine, and Meta Box), you can use the widget to add a dynamic star rating to an individual blog post. The idea is to create a custom template for blog posts and add the dynamic star rating using the Star Rating widget.

In order to be able to create a custom template and add a dynamic star rating, you need to use the pro version of Elementor as the feature to add dynamic content is only available on Elementor Pro (read: Elementor Free vs Elementor Pro). Follow the steps below to add a dynamic star rating in Elementor.

Step 1: Create a Custom Field Group Using ACF

First, you need to create a custom field group using ACF. To do so, go to ACF -> Field Groups on your WordPress dashboard (make sure you have installed and activated the ACF plugin).

Add a new field group by clicking the Add New button.

Give your field group a name and add your custom fields on the Fields block. For this purpose, you need a number field type. So, on the Field Type option, set to Number. You can also set the field label, field name and default value

Next, go to the Validation tab and set the minimum and maximum value. Still most star rating usually ranging between 1 to 5, you can set the minimum value to 1 and maximum value to 5.

You can add more custom fields according to your need. Once done adding the fields, go to Settings block to assign the field group. If you want to assign the custom fields group to the default post type (blog posts), you can leave everything default. Conversely, if you want to assign the custom fields group to a certain post type, you can simply select it under the under the Location Rules tab.

You can click the Save Changes button once done setting the custom fields group.

Next, create a new post. On the custom fields section, type a number (rating) on the field you have specified above and publish the post.

Step 2: Create A Custom Template Using Elementor Theme Builder

The pro version of Elementor comes with a theme builder feature to create custom templates for your theme, including the single post template. You can make use of this feature to create a custom template for the single post and add the Star Rating widget on the template.

First, go to Templates -> Theme Builder and open the Single Post tab. Click Add New to create a new single post template.

Select a premade template from the appearing template library window. Or if you want to create the custom single post from scratch, you can simply close the window to open the Elementor editor.

On the Elementor editor, add the Star Rating widget to the canvas area.

Go to the settings panel on the left side. Click the dynamic icon on the Rating field under the Rating block and select ACF Number Field.

Click the wrench icon on the ACF Number Field field and select the key (custom field) you have created on step one above.

Continue editing your custom single post template. Once done, you can simply publish it. For more detailed instructions on how to create a custom single post template in Elementor, you can read this post.

PS

If you face in issue when adding an ACF field, you can read this post to fix it. Or if you need a more reliable hosting to host your Elementor-powered WordPress website, you have compiled the best hosting for Elementor you can try.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

6 thoughts on “How to Add Dynamic Star Rating in Elementor”

  1. This works great. Only issue is that I’m limited to 5 star reviews. I can’t add one with more than that. Is there any way to do that? Thanks!

    Reply

Leave a Comment

Haven’t used Elementor Pro yet?