How to Add Dynamic Star Rating in Elementor

Updated: January 23, 2021

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 plugin, 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. When creating a custom field group, you can add a field with the field type of number.

Also set the minimum as well as the maximum value.

You can add more custom fields according to your need. Once done adding the fields, you can assign the field group to the default post type (blog post). You can read this article to learn more about how to create custom fields with ACF.

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’s 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.

Give your template a name and click the CREATE TEMPLATE button.

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. You can add a prefix on the Title field.

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.

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!