The WooCommerce Product Reviews Block displays customer review information including star ratings, review counts, and review text in a fully customizable format. This DigiBlocks WooCommerce category block automatically integrates with WooCommerce review functionality and presents it with comprehensive styling options, hover effects, and responsive design controls.
This block is perfect for creating custom single product templates using the Site Builder feature from our DigiFusion theme and its Pro version, giving you complete control over how review information appears throughout your WooCommerce store.
Adding the Product Reviews Block
Navigate to any post, page, or custom template where you want to display WooCommerce product review information. Click the block inserter (+) and search for “Product Reviews” in the DigiBlocks WooCommerce category. The block will be added with a placeholder showing sample review data that demonstrates how actual reviews will appear on single product pages.
Content Configuration
Display Options
Show Stars – Toggle the display of star rating visualization, showing filled and empty stars based on the product’s average rating
Show Review Count – Control whether to display the number of customer reviews in parentheses next to the stars
Show Reviews Text – Toggle the display of descriptive text such as “customer review” or “customer reviews” depending on the count
Layout Configuration
Review Alignment
Control how the review elements align within their container:
Left – Aligns all review elements to the left side of the container
Center – Centers the review display within the available space
Right – Aligns review elements to the right side of the container
Color Customization
Normal State Colors
Configure default colors in the Normal tab of the Colors panel:
Stars Color – Sets the color for filled stars representing the rating portion
Empty Stars Color – Controls the color of unfilled stars in the rating display
Count Color – Text color for the review count number in parentheses
Text Color – Color for the descriptive review text
Hover State Colors
Define interactive color changes in the Hover tab:
Count Hover Color – Color the review count changes to when users hover over it
Text Hover Color – Text color change when users hover over the review text
All color controls support alpha transparency for creating sophisticated color effects and maintaining brand consistency with your WooCommerce store design.
Sizing and Spacing Controls
Star Configuration
Stars Size – Control the size of individual star icons with responsive controls ranging from 10-40 pixels, allowing precise sizing across desktop, tablet, and mobile devices
Element Spacing
Items Spacing – Adjust the gap between review elements (stars, count, text) with responsive controls from 0-50 pixels for optimal visual separation
Container Spacing
Padding – Control internal spacing within the review container
Top Padding – Space above the review elements
Right Padding – Space to the right of container content
Bottom Padding – Space below the review elements
Left Padding – Space to the left of container content
Margin – Set external spacing around the entire review block
Top Margin – Space above the review block
Right Margin – Space to the right of the block
Bottom Margin – Space below the review block
Left Margin – Space to the left of the block
Typography Styling
Count Typography
Configure the appearance of review count numbers with comprehensive typography controls:
Font Family – Select from Google Fonts or system fonts
Font Size – Responsive controls with pixel, em, or rem units
Font Weight – Select from available font weights
Font Style – Normal or italic styling
Text Transform – None, uppercase, lowercase, or capitalize
Text Decoration – Add underline, overline, or line-through effects
Line Height – Control line spacing with em or pixel units
Letter Spacing – Adjust character spacing with responsive controls
Default settings include 14px font size on desktop, 13px on tablet, and 12px on mobile with line height values of 1.4, 1.3, and 1.2 respectively.
Text Typography
Independent typography controls for the review text with the same comprehensive options as count typography, allowing separate styling for descriptive text elements.
Interactive Features
Hover Effects
Visual Feedback – Smooth color transitions provide immediate visual feedback when users hover over interactive review elements
Transition Animations – All hover effects include smooth 0.3s transitions for professional interaction
Link Behavior – Review counts and text can function as links to review sections when integrated with WooCommerce
Advanced Features
Animation Effects
Add engaging entrance animations to the review display:
Animation Selection – Choose from fade, slide, zoom, bounce, and other animation effects
Preview Functionality – Test animations directly in the editor with the Preview Animation button
Animation Timing – Animations trigger when users scroll the block into view
Responsive Visibility
Control block visibility across different devices:
Hide on Desktop – Conceals the review block on desktop screens (992px and above)
Hide on Tablet – Hides the block on tablet devices (768px to 991px)
Hide on Mobile – Removes the block from mobile displays (767px and below)
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
Additional Options
HTML Anchor – Create a unique anchor link for direct navigation to the review section
Additional CSS Classes – Add custom CSS classes for advanced styling or targeting
WooCommerce Integration
The block seamlessly integrates with WooCommerce review functionality:
Review Data Display – Automatically pulls actual review data including average ratings, review counts, and appropriate text
Dynamic Content – Shows placeholder content in the editor but displays real review information on single product pages
Review Linking – Can link to review sections or review tabs when properly configured
Rating Calculation – Displays accurate star ratings based on WooCommerce review averages
Review Count Updates – Automatically reflects current review counts as they change
Review Display Logic
Star Visualization – Filled stars represent the rating portion while empty stars show the remaining rating scale
Half-Star Support – Supports partial ratings with gradient fills for precise rating display
Review Text Logic – Automatically switches between singular “customer review” and plural “customer reviews” based on count
No Reviews State – Gracefully handles products with no reviews by showing appropriate empty states
Security and Performance
Data Integration – Safely integrates with WooCommerce review data without security vulnerabilities
Performance Optimization – Lightweight implementation that doesn’t impact page load times
Accessibility – Includes proper ARIA labels and semantic markup for screen readers
Responsive Design
All styling options include device-specific controls for desktop, tablet, and mobile screens. Star sizes, typography, spacing, and layout elements can be adjusted independently for each breakpoint to ensure optimal review display across all devices.
The block maintains its functionality and styling consistency whether used in single product templates, product comparison pages, or custom WooCommerce layouts created with the DigiFusion theme’s Site Builder feature.