The Woo Rating element is a dynamic Porto widget designed for WooCommerce product layouts inside the Porto Post Type Builder. It displays the product’s average rating along with WooCommerce star styling. This element is commonly used in product cards, grids, carousels, related products, category listings, and any custom post-type layout that needs to show star ratings.
The widget automatically pulls rating data from WooCommerce, ensuring the display updates in real time as customers leave reviews.
How to Use the Woo Rating Element
You can add the Woo Rating widget by clicking the “+” Add Block button in the top-left corner of the Post Type Builder editor. After inserting the widget, you can manage its placement and hierarchy through the Document Overview panel, allowing you to drag, reorder, or nest the element within your layout.
This widget is typically placed near the product title, price, or “Add to Cart” button to communicate trust and review quality.
Element Content Options
-
Alignment
Controls how the rating stars align within the element’s container. This helps match the structure of your item layout, especially when placing ratings beside images, titles, or prices.
-
Review Width
Defines the width of the rating display area. This is especially useful when:
- You want the stars to align nicely with other elements
- You want the rating area to match the width of product titles or price rows
- You need consistent layout spacing in grids and carousels
This setting accepts numeric values (e.g., 100px, 50%, etc.), depending on your design needs.
-
Additional Custom CSS Fields
The widget includes extra fields for Custom CSS class, Custom CSS ID, Inline style input. This is useful when You need targeted styling, You want to animate individual image blocks, You integrate the element into advanced CSS frameworks.
Typical Use Cases
The Woo Rating element is commonly used in:
- Product listings on shop pages
- Product grids created with Porto Elements
- Category and subcategory item layouts
- “Related Products” sections
- Ajax filters and product loops
- Custom product card designs built entirely with the Post Type Builder
It is especially important for e-commerce stores where visual trust indicators improve conversion rates.
