WooCommerce Product Rating helps your customers understand the quality of the product, and this widget was created for just that. The widget allows you to customize the default color of stars and stars on hover and of course select the size of the icons.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
In the Content section, you can manage several basic settings of the WooCommerce Product Rating such as alignment and products selection.
- Products – the option allows you to select the product whose images will be displayed. The selection is available if the widget is added to a regular page and not a product page.
- Show reviews link
- Alignment – specify the alignment of the block: Left, Center, Right, Space between.
Style tab
On the style tab, you can manage the element styles of the Product rating widget like background, color, size, borders, padding/margin, etc.
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
- Rating star size – specify the icon size in different units (px or em) using the slider.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The rating style settings for different states.
- Rating color – specify the rating icon color and opacity using the color picker.
- Review Text color – specify the review text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- Review Link Text Shadow – the setting creates a shadow from the review link text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
