Product rating/review

Estimated reading: 3 minutes 18 views

The Product Rating/Reviews Widget allows you to add, style, and manage product ratings and customer reviews anywhere on your Elementor-powered page. It’s perfect for displaying WooCommerce product ratings, review counts, and detailed customer feedback, with customizable styling options and responsive settings.

Whether you’re designing a product page, shop catalog, or testimonial section, the Product Rating/Reviews Widget makes it easy to present ratings and reviews with precision and style.

Key Features:

  • Display product ratings and review counts
  • Show customer reviews with titles, authors, dates, and comments
  • Customize visibility of rating stars, counts, percentages, and review details
  • Link to specific products or pages
  • Fully responsive and optimized

🚀 How to Enable the Product Rating/Reviews Widget

To start using the Product Rating/Reviews Widget, follow these steps:

  1. Navigate to your WordPress dashboard.
  2. Go to Topper Pack → Widgets.
  3. Locate the Product Rating/Reviews widget from the list.
  4. Toggle the switch to “On” to enable it.
  5. The widget is now available in the Elementor editor.

🧩 How to Use the Product Rating/Reviews Widget in Elementor

Step 1: Add the Widget to Your Page

  • Open your desired page using Elementor Editor.
  • Search for “Product Rating/Reviews” in the Elementor widget panel.
  • Drag and drop the Product Rating/Reviews TP widget onto your page canvas.
  • 🔄 Tip: It includes the TP badge, which means it’s from the Topper Pack.

Step 2: Configure Rating/Reviews Settings

  • Under the Content → Settings section:
    • Toggle Select Specific Product to “Yes” to manually choose a product, or leave it as “No” to automatically fetch the current product (e.g., on a product page).
    • Toggle Show Title to “Yes” to display a review title, and optionally use “Write with AI” to generate a title.
    • Set Customer Reviews to customize the review content.
    • Toggle Show Reviews, Show Rating, Show Percentage, Show Rating Count, Show Author, Show Comments, and Show Date Time to control visibility of each element.

Step 3: Style the Rating Star

  • Under the Style → Rating Star section:
    • Customize Typography to set font size, weight, and style for the rating stars.
    • Set Color for the stars, and adjust Margin and Padding to control spacing (e.g., top, right, bottom, left).

Step 4: Style Review Elements

  • Under the Style sections for Review Count, Review Title, Author, Date, and Review Comment:
    • Adjust Typography, Color, Margin, and Padding for each element to match your design preferences.

✅ Final Preview and Save

Once your product rating/reviews settings and style options are applied:

  • Click Preview Changes to see how it looks.
  • Hit Publish or Update to save your page.

Leave A Comment

All fields marked with an asterisk (*) are required