Elementor Star Rating Widget (Advanced Rating Widget)
Updated · MoxKit 1.4.4 · Download free on WordPress.org
The Elementor star rating widget (Advanced Rating) shows a score with stars, rounded stars, hearts, circles or any icon from the Elementor library. Fill is exact (4.6 shows 60% of the fifth star), half or whole.
- Widget name MoxKit Advanced Rating
- Panel category MoxKit Addons
- Settings 38+
- Requires Elementor 3.25+ (free)
- Price Free
Table of contents
What is the Elementor star rating widget?
Show the score as 4.6, 4.6/5, 4.6 out of 5 or 92%, add a title and a review count, and animate the icons as they appear.
Like every MoxKit widget, the Advanced Rating has Content and Style tabs with responsive settings, typography, colors and box styling, and it keeps Elementor's Advanced tab. You can switch it off under MoxKit > Widgets if you do not use it; a disabled widget loads no files.
Key features
- Shapes: star, rounded star, heart, circle, or library icons with an optional unfilled icon.
- Scale from 1 to 10.
- Exact, half or whole fill; solid or outline unfilled icons.
- Score formats: value, value/scale, "out of", percent.
- Layouts: inline, stacked, score.
- Entrance: fill, pop, rise; icon hover: grow, lift, spin.
How to add the Elementor star rating widget
Follow these steps to add the widget to a page. You need MoxKit Addons for Elementor installed and Elementor active.
- Open the page in Elementor (Pages > Edit with Elementor).
- In the widget panel, search for "Advanced Rating" or scroll to the MoxKit Addons category.
- Drag the Advanced Rating widget into a Container.
- Type the Rating and the scale (Out of).
- Pick a shape or library icon and the fill precision.
- Set the title, score format and review count text.
- Click Update (or Publish) to save the page.
Elementor star rating widget settings: Content tab
The Content tab holds what the widget shows and how it behaves. It has 2 sections and about 18 settings. Settings marked per device can have a different value on desktop, tablet and mobile.
Rating
| Setting | Type | Options and notes |
|---|---|---|
| Rating | Number | |
| Out of | Number | |
| Fill precision | Select | Exact (e.g. 4.6 fills 60% of the last icon), Round to half icons, Round to whole icons (default: Exact (e.g. 4.6 fills 60% of the last icon)) |
| Icon source | Choice | Built-in shape, Elementor Icon Library (default: Built-in shape) |
| Shape | Select | Star, Rounded star, Heart, Circle (default: Star) |
| Filled icon | Icon | |
| Unfilled icon (optional) | Icon | Empty = the filled icon in the unfilled color. Pick an outline version (e.g. a regular star) for the classic look. |
| Unfilled icons | Select | Solid, Outline (default: Solid) |
| Title | Text | |
| Title HTML tag | Select | H2, H3, H4, H5, H6, div, p, span (default: div) |
| Show score | Toggle | On / Off (default: On) |
| Score format | Select | 4.6, 4.6/5, 4.6 out of 5, 92% (default: 4.6/5) |
| Review count text | Text | |
| Layout | Select | Icons and score in one row, Each part on its own line, Big score beside the icons (default: Icons and score in one row) |
| Alignment per device | Choice | Left, Center, Right |
Animation
| Setting | Type | Options and notes |
|---|---|---|
| Entrance | Select | None, Fill one icon after another, Pop in, Rise and fade in (default: Fill one icon after another) |
| Duration per icon (ms) | Slider | |
| Icon hover effect | Select | None, Grow, Lift, Spin (default: None) |
Elementor star rating widget settings: Style tab
The Style tab controls the look of every part of the widget: 6 sections, about 20 settings. Elementor's own Advanced tab (margin, padding, motion effects, responsive visibility, custom CSS) is available as usual.
Icons
| Setting | Type | Options and notes |
|---|---|---|
| Size per device | Slider | |
| Spacing per device | Slider | |
| Filled color | Color | |
| Unfilled color | Color | |
| Outline thickness | Slider |
Title
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Bottom spacing per device | Slider |
Score
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Typography | Group | All the usual Elementor typography settings. |
| Scale color ("/5", "out of 5") | Color |
Review count
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color |
Layout
| Setting | Type | Options and notes |
|---|---|---|
| Space between parts per device | Slider |
Box
| Setting | Type | Options and notes |
|---|---|---|
| Background | Group | All the usual Elementor background settings. |
| Border | Group | All the usual Elementor border settings. |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Padding per device | Spacing | |
| Border radius per device | Spacing |
Tips and best practices
- Use the score layout for a big headline rating.
- Combine with the Testimonial rating summary for review pages.
Advanced Rating FAQ
Can I show 4.7 stars exactly?
Yes. Exact fill paints 70% of the fifth star.
Can I use my own icon?
Yes. Set Icon source to Library.
Summary
The Elementor star rating widget in MoxKit is free, works with the free version of Elementor and loads its files only on pages that use it. Stars, hearts, circles or any icon, 1–10 scale, exact or half fill, score formats and review count. Install MoxKit Addons for Elementor from WordPress.org, drag the Advanced Rating widget onto a page and start with the settings above.