How To Use The Product Rating Widget By Atomic Addons

The Product Rating widget by Atomic Addons shows the product's average rating as stars in a product page design, followed by the number of reviews, such as “(3 customer reviews)”, as a link to the reviews. This guide covers adding the widget, its layout settings, what it shows and its styles.

Enable the Product Rating Widget

Product Rating is a Pro widget and needs Atomic Addons Pro and WooCommerce. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Product Rating. You can also open the WooCommerce category.

4. 4

   Turn the Product Rating widget on.

5. 5

   Click Save Settings.

Add the Product Rating Widget

The widget belongs in a Theme Builder template for products, usually right under the Product Title widget:

1. 1

   Go to WordPress Dashboard → Atomic Addons → Theme Builder.

2. 2

   Click Add New and choose the Single Product card.

3. 3

   Give the template a name and open it in Elementor. Its display condition is already set to WooCommerce → Product, so it applies as soon as you publish it.

4. 4

   In the widget panel, search for Product Rating and drag it into the template. The widget sits in the Atomic Addons Pro (Single) category.

5. 5

   Design it with the controls below, then click Publish.

In the editor the template previews a sample product: the one picked under Builder Settings → Builder Post in the template's page settings (click Apply & Preview), or your newest product if none is picked. On your store, each product page shows its own rating; anywhere else the widget falls back to your newest product. The widget appears in the panel only while you edit a Theme Builder template, a saved Elementor template or a product.

Layout

(Open the full-size image in a new tab)

Open the widget and go to Content → Layout:

1. 1

   Hide Review Link: Turn it on to show the stars only. Off by default.

2. 2

   Alignment: Start, Center or End moves the stars and link together. Space Between puts the stars at the start and the link at the end. Set it per screen size.

3. 3

   Gap: The space between the stars and the link, in pixels or percent. It is 8px when left empty.

What the Widget Shows

The stars fill to the product's average rating, so 4.67 shows four and two-thirds stars. The review link appears while the product accepts reviews: Enable product reviews in WooCommerce's settings and Enable reviews on the product. It points to #reviews, the reviews section that WooCommerce prints in its Reviews tab, for example in the Product Tabs widget.

Style the Product Rating

The Style tab has one section, Product Rating, in three groups:

• Star Rating — Fill Star Color for the filled part, Empty Star Color for the rest, and Typography, whose font size sets the size of the stars.
• Review Link — the link's Color and Typography.
• Review Count — the Color and Typography of the number in the link.

Review Link and Review Count are hidden while Hide Review Link is on.