The WooCommerce Product Rating Block allows you to display the star rating of a selected WooCommerce product anywhere inside the Block Editor.
The block dynamically pulls the rating data directly from WooCommerce, ensuring the rating stays updated as customers leave reviews.
Overview
Use this block when you want to:
- Display star ratings inside posts or pages
- Highlight product reviews on landing pages
- Build custom product layouts
- Showcase social proof alongside pricing or add-to-cart buttons
The block uses WooCommerce’s native rating HTML to maintain compatibility and consistent styling.
Requirements
- WordPress 6.0+
- WooCommerce installed and activated
- Reviews enabled in WooCommerce settings (for ratings to appear)
How to Use
- Open the Block Editor.
- Click the “+” Add Block button.
- Search for WooCommerce Product Rating.
- Insert the block.
- Select a product using the Product Selector.
- Adjust alignment if needed.
The rating will automatically update whenever new reviews are submitted.
Block Settings
Depending on your configuration, the block may include:
- Product Selector
Choose which WooCommerce product to display ratings for. - Text Alignment
Align the rating left, center, right, or justify. - Editor Placeholder
Displays a preview state when no product is selected.
How It Works
The block retrieves WooCommerce’s rating markup, which includes:
- Star rating visualization
- Average rating value
- Review count (if configured)
- Proper ARIA attributes for accessibility
Because it uses WooCommerce’s native output:
- Star percentages are calculated automatically.
- Ratings are always out of 5 (WooCommerce standard).
- Theme styling is preserved.
- WooCommerce filters and customizations still apply.
Supported Behavior
- Displays average star rating (0–5 scale)
- Updates dynamically when reviews change
- Compatible with custom WooCommerce rating filters
- Works with most WooCommerce-compatible themes
If a product has no reviews, the block may display no rating depending on WooCommerce settings.
Styling
The block inherits styles from:
- Your active theme
- WooCommerce styles
- Any custom CSS you apply
You can customize appearance using:
- Block alignment tools
- Additional CSS
- WooCommerce rating hooks
Example Use Cases
- Product landing pages
- Comparison tables
- Sales funnels
- Blog posts promoting products
- Pricing sections with social proof