WooCommerce Single: Product Rating
Product Rating is an important feature for any online store as it allows customers to leave a rating for your products. These ratings are typically represented by stars, with more stars indicating higher customer satisfaction. Displaying product ratings on your store can help future customers make informed decisions, establish trust, and encourage sales.
The Product Rating widget in JupiterX lets you seamlessly integrate and style these ratings on your WooCommerce single product pages. It not only displays the average star rating but also links to customer reviews, if available.
How to customize Product Rating Using JupiterX
To customize the product rating display to align with your store's design, you can use the intuitive options provided in the JupiterX theme along with the Elementor page builder. Here's how you can style the Product Rating widget:
Accessing the Product Rating Widget
- Navigate to the Elementor editor for the single product template you wish to modify.
- In the Elementor sidebar, locate the "Product Rating" widget. Drag and drop it into the appropriate section on your layout.
Styling the Product Rating
- Star Color: Click the color swatch under 'Star Color' to select a fill color for the stars that represent the product's average rating. You can input a hexadecimal color code for precision.
- Empty Star Color: Select a color for the empty star shapes by clicking the corresponding swatch under 'Empty Star Color'. This distinct color helps to visually separate the active rating from the maximum potential stars.
- Link Color: Adjust the color of the review link by clicking the 'Link Color' swatch. This often changes the appearance of the text indicating the number of reviews a product has received.
- Typography: Customize text styling by clicking the pencil icon next to 'Typography'. From here, you can adjust various attributes such as font family, size, weight, and more to ensure the text complements your overall design.
- Star Size: Use the slider to set the star size according to your preference, or type in a specific value and unit like pixels or em.
- Space Between: Adjust the gap between individual stars using the slider or by typing a specific value into the input field next to it.
- Alignment: Align the rating stars and text to your liking by selecting from left, center, or right alignment options.
By following these simple steps, you can tailor the Product Rating widget to fit your store's style and ensure it enhances your customers' shopping experience on your website.