The DigiCommerce Product Reviews Form Block displays a comprehensive review system for DigiCommerce products, combining both existing product reviews and a form for customers to submit new reviews. This Pro block is perfect for custom single product templates that you can create with our Site Builder feature from our DigiFusion theme and its Pro version. It automatically integrates with DigiCommerce product data to show authentic customer feedback and enable new review submissions.
Adding the DigiCommerce Product Reviews Form Block
Navigate to the post or page where you want to display the product reviews and form. Click the block inserter (+) and search for “Product Reviews Form” in the DigiBlocks DigiCommerce category. The block will be added with a preview showing how both existing reviews and the review submission form will appear on DigiCommerce product pages.
Display Configuration
Reviews Section
The block displays existing product reviews with the following elements:
Review Count – Shows the total number of reviews for the product
Individual Reviews – Each review displays:
- Star rating visualization
- Reviewer name and date
- Review content text
Review Form Section
The submission form includes:
Star Rating Input – Interactive 5-star rating system for customers to rate products
Review Text Area – Large text field for detailed review content
Customer Information – Name and email fields for review attribution
Submit Button – Styled submission button to process the review
Style Customization
Color Settings
Configure colors through the Colors style panel with Normal and Hover state tabs:
Normal State Colors:
Form Background – Set the background color for the entire review section
Form Text – Choose the color for general text content
Label Color – Set the color for form field labels
Input Background – Configure background color for form inputs
Input Text – Set the text color within form fields
Input Border – Choose the border color for form inputs
Input Focus Border – Set the border color when inputs are focused
Button Background – Configure the submit button background color
Button Text – Set the submit button text color
Rating Star – Choose the color for unselected rating stars
Hover State Colors:
Button Background Hover – Button background color on mouse hover
Button Text Hover – Button text color during hover state
Rating Star Hover – Color for stars when hovered or selected
Form Border Color – Set the border color for the form container
Typography Controls
Customize text appearance with independent typography settings:
Label Typography:
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
Input Typography:
Font Family – Independent font selection for form inputs
Font Size – Responsive sizing for input text
Font Weight – Control input text weight
Font Style – Styling options for input content
Line Height – Input-specific line height controls
Letter Spacing – Character spacing for input text
Button Typography:
Font Family – Choose font for the submit button
Font Size – Responsive button text sizing
Font Weight – Button text weight options
Font Style – Button text styling
Text Transform – Button text transformation options
Text Decoration – Button text decoration effects
Line Height – Button text line height
Letter Spacing – Button text character spacing
Spacing Configuration
Control spacing through the Spacing style panel:
Padding – Internal spacing around the entire block
Margin – External spacing around the block
Form Padding – Internal spacing within the form container
Input Padding – Padding inside form input fields
Button Padding – Internal spacing within the submit button
All spacing controls include responsive settings for desktop, tablet, and mobile devices.
Border and Radius Styling
Configure borders and corner rounding:
Form Border Style – Choose from none, solid, dashed, dotted, or double
Form Border Width – Set thickness for form container borders
Form Border Radius – Round the corners of the form container
Input Border Style – Border style for form input fields
Input Border Width – Border thickness for inputs
Input Border Radius – Corner rounding for form inputs
Button Border Radius – Corner rounding for the submit button
Shadow Effects
Add depth with shadow controls:
Form Shadow – Normal state shadow for the form container
Form Shadow Hover – Shadow effect when hovering over the form
Shadow controls include horizontal offset, vertical offset, blur radius, spread radius, and color selection.
Advanced Features
Animation Effects
Add entrance animations to enhance user engagement:
Animation Effect – Choose from fade, slide, zoom, bounce, and other effects
Animation Preview – Test animations in the editor with the preview button
Animations trigger when users scroll the block into view on the frontend.
Visibility Controls
Control block display across different devices:
Hide on Desktop – Hide the block on desktop screens (992px and above)
Hide on Tablet – Hide the block on tablet screens (768px to 991px)
Hide on Mobile – Hide the block on mobile screens (767px and below)
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
Additional Settings
HTML Anchor – Add a unique anchor ID for direct linking to the review section
Additional CSS Classes – Include custom CSS classes for advanced styling or JavaScript targeting
DigiCommerce Integration
The block automatically integrates with DigiCommerce product data when placed on single product pages. It displays actual customer reviews from the DigiCommerce review system and processes new review submissions through the DigiCommerce review workflow.
Review Submission Process
When customers submit reviews through the form:
- Form validation ensures required fields are completed
- Star rating is captured and stored with the review
- Customer information is processed according to DigiCommerce settings
- Reviews may require moderation before appearing publicly
- Email notifications can be sent to administrators about new reviews
Display Requirements
The block functions optimally when:
- Placed on DigiCommerce single product pages
- DigiCommerce plugin is active and configured
- Product has the reviews feature enabled
- Customers are logged in or guest reviews are permitted
This block enhances the DigiCommerce shopping experience by providing social proof through customer reviews and enabling easy review submission, ultimately supporting informed purchasing decisions and building customer trust.