Add the widget
Add the widget to the canvas
To access and use a widget:
In Elementor Editor, click +.
All available widgets are displayed.Click or drag the widget to the canvas. For more information, see Add elements to a page.
What is the Product Rating widget?
Potential customers are always interested in what others think about your store’s products. The Product Rating widget allows you to display a summary of how other customers rated a particular product.Â
See all the options available with the Product Rating widget. Â
Common use case
Jordan is building an online natural products store. They decide to allow customers to rank the products they offer by giving them between one and five stars. The website will take these rankings and display the average rating for other potential customers.
Example
Additional use cases
- Gathering ratings from third-party sources and displaying them for potential customers.
Adding a Product Rating widget: Step-by-step
In the example below, we’ll add product ratings to our single product template.
Add a Product Rating widgetÂ
To add a Product Rating widget:
This widget only works within a WooCommerce Single Product template, so you must have WooCommerce installed to use it.
- Open your single product template in the Elementor Editor.Â
- Add the Product Data Tabs widget if it’s not already part of the template.
NoteThe Product Data Tabs widget lets users submit ratings. You can’t add the Single Product Rating widget without it.
-
Add the WooCommerce Single Product Rating widget to the canvas.
If there aren’t any ratings available yet, you won’t see any rating displayed. - Use the Style tab to design the stars’ appearance.
For this example, let’s make the stars red and larger. - Click the swatch next to Star Color.
- Change the color to red. For details, see Choose a color or Use global fonts and colors.
- Use the Star Size slider to increase the ratings icons.Â
The product rating is displayed to your users.
Â
Settings for the Product Rating widget
You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.
Style tab
Determine the look and feel of the Product Rating controls.
Star Color
Set the color of the rating symbols when they are chosen. For details, see Choose a color or Use global fonts and colors.
Empty Star Color
Set the color of the rating symbols when they are not chosen. For details, see Choose a color or Use global fonts and colors.
Link Color
Set the color of any links in the Product Rating. For details, see Choose a color or Use global fonts and colors.
Typography
Set the font type and size of the rating stars. For details, see Typography.
Star Size
Use the slider the set the size of the rating stars.
Space Between
Use the slider to adjust the amount of space between the product rating stars.
Alignment
Choose to have the caption text line up:
To the left
To the right
Centered
Justified: aligned evenly along both the left and right margins, creating a clean and uniform block appearance.
Advanced tab
Control the placement of your widget, insert links, add custom code and more.
Advanced
Learn more about the Advanced tab settings.
