The WooCommerce Product Reviews Form Block creates a fully customizable review submission form that integrates seamlessly with WooCommerce’s review system. This DigiBlocks WooCommerce category block allows customers to submit product reviews with star ratings, review text, and personal information in a beautifully designed, responsive form.
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 the review submission experience appears throughout your WooCommerce store.
Adding the Product Reviews Form Block
Navigate to any post, page, or custom template where you want to display the WooCommerce product review form. Click the block inserter (+) and search for “Product Reviews Form” in the DigiBlocks WooCommerce category. The block will be added with a placeholder form that demonstrates how the actual review form will appear on single product pages.
Form Structure
The review form includes essential elements for comprehensive review submission:
Form Title – “Add a review” heading that introduces the review section
Star Rating – Interactive 5-star rating system allowing customers to select their rating
Review Text Area – Large text field for detailed review content with placeholder text
Name Field – Required input for the reviewer’s name
Email Field – Required email input for reviewer contact information
Submit Button – Styled submission button to process the review
Color Customization
Normal State Colors
Configure default colors in the Normal tab of the Colors panel:
Form Background – Sets the overall background color of the review form container
Form Text – Controls the default text color within the form
Label Color – Color for field labels like “Your rating”, “Your review”, etc.
Input Background – Background color for text inputs and textarea fields
Input Text – Text color within input fields and textarea
Input Border – Border color for form inputs in their default state
Input Focus Border – Border color when users click into or focus on input fields
Button Background – Background color for the submit button
Button Text – Text color for the submit button
Rating Star – Color for unselected stars in the rating system
Hover State Colors
Define interactive color changes in the Hover tab:
Button Background Hover – Background color the submit button changes to on hover
Button Text Hover – Text color change when users hover over the submit button
Rating Star Hover – Color stars change to when users hover over them or make a selection
Form Border Colors
Additional border customization options:
Form Border Color – Color for the outer border of the entire form container when border styling is enabled
All color controls support alpha transparency for creating sophisticated color effects and maintaining brand consistency with your WooCommerce store design.
Typography Styling
Label Typography
Configure the appearance of form field labels 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 16px font size on desktop, 15px on tablet, and 14px on mobile with font weight of 600 and line height values of 1.4, 1.3, and 1.2 respectively.
Input Typography
Independent typography controls for input field text with the same comprehensive options as label typography, allowing separate styling for user-entered content.
Button Typography
Dedicated typography controls for the submit button with complete customization options, including default settings of 16px font size on desktop, 15px on tablet, and 14px on mobile with font weight of 500 and line height values of 1.5, 1.4, and 1.3 respectively.
Spacing Controls
Container Spacing
Padding – Control internal spacing within the block container
Top Padding – Space above the form
Right Padding – Space to the right of the form
Bottom Padding – Space below the form
Left Padding – Space to the left of the form
Margin – Set external spacing around the entire form block
Top Margin – Space above the form block
Right Margin – Space to the right of the block
Bottom Margin – Space below the form block
Left Margin – Space to the left of the block
Form Spacing
Form Padding – Internal spacing within the form container itself, controlling the space between the form border and its content
Input Spacing
Input Padding – Control internal spacing within input fields and textarea for comfortable text entry
Top Input Padding – Space above input text
Right Input Padding – Space to the right of input text
Bottom Input Padding – Space below input text
Left Input Padding – Space to the left of input text
Button Spacing
Button Padding – Control internal spacing within the submit button for optimal clickable area and visual balance
Border and Radius Styling
Form Border Configuration
Form Border Style – Choose from None, Solid, Dashed, Dotted, or Double border styles for the form container
Form Border Width – When border style is enabled, control the thickness of form borders with responsive dimension controls
Form Border Radius – Apply rounded corners to the form container using responsive controls supporting both pixel and percentage units
Input Border Configuration
Input Border Style – Independent border styling for input fields and textarea with the same style options as the form border
Input Border Width – Control border thickness for individual form inputs when border styling is enabled
Input Border Radius – Apply rounded corners to input fields and textarea independently from the form container
Button Border Radius
Button Border Radius – Control corner rounding for the submit button with responsive controls supporting both pixel and percentage units
Form Shadow Effects
Form Shadow – Add drop shadow effects to the form container with controls for horizontal offset, vertical offset, blur radius, spread radius, and shadow color
Form Shadow Hover – Configure different shadow effects that appear when users hover over the form area
Interactive Features
Form Focus States
Input Focus Effects – Automatic border color changes and subtle visual feedback when users click into form fields
Focus Transitions – Smooth 0.3s transitions for professional interaction feedback
Tab Navigation – Full keyboard accessibility for navigating between form fields
Star Rating Interaction
Interactive Stars – Click or tap functionality for selecting star ratings with visual feedback
Hover Preview – Stars highlight as users hover over them, showing the potential rating selection
Rating Persistence – Selected ratings remain highlighted until users make a different selection
Button Hover Effects
Color Transitions – Smooth background and text color changes on button hover
Visual Feedback – Immediate responsive feedback for user interactions
Cursor Changes – Automatic cursor pointer changes to indicate interactive elements
Advanced Features
Animation Effects
Add engaging entrance animations to the review form:
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 form on desktop screens (992px and above)
Hide on Tablet – Hides the form on tablet devices (768px to 991px)
Hide on Mobile – Removes the form 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 form section
Additional CSS Classes – Add custom CSS classes for advanced styling or targeting
WooCommerce Integration
The block seamlessly integrates with WooCommerce review functionality:
Review Submission – Form data processes through WooCommerce’s standard review system with proper validation and security
User Authentication – Integrates with WordPress user systems and WooCommerce customer accounts
Review Moderation – Submitted reviews follow WooCommerce moderation settings and admin approval workflows
Spam Protection – Includes built-in protection against spam submissions and automated form filling
Database Storage – Reviews store properly in the WordPress database following WooCommerce standards
Form Validation
Required Fields – Automatic validation for required fields including review text, name, and email
Email Validation – Proper email format checking before form submission
Rating Requirement – Ensures users select a star rating before submission
Content Length – Enforces minimum and maximum content length requirements for review text
Error Messaging – Clear, user-friendly error messages for validation failures
Security and Performance
Nonce Verification – Maintains WooCommerce security standards with proper nonce verification for form submissions
Data Sanitization – All form inputs are properly sanitized before database storage
CSRF Protection – Cross-site request forgery protection through WordPress security systems
Performance Optimization – Lightweight implementation that doesn’t impact page load times
Accessibility – Includes proper ARIA labels, keyboard navigation support, and screen reader compatibility
Responsive Design
All styling options include device-specific controls for desktop, tablet, and mobile screens. Form layout, typography, spacing, and interactive elements can be adjusted independently for each breakpoint to ensure optimal review submission experience across all devices.
The form automatically adapts its layout for mobile devices, ensuring comfortable text entry and button interaction on touch screens while maintaining professional appearance and functionality.
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.