The DigiCommerce Product Content Block displays comprehensive product information including full descriptions or short descriptions on single product pages. This block automatically pulls content from your DigiCommerce product database and presents it with extensive customization options for typography, colors, and layout. Perfect for creating custom single product templates using the DigiFusion theme and its Site Builder feature from DigiFusion Pro.
Adding the DigiCommerce Product Content Block
Navigate to your single product template or product page where you want to display the product content. Click the block inserter (+) and search for “Product Content” in the DigiBlocks DigiCommerce category. The block will be added with placeholder content that demonstrates how the actual product information will appear on the frontend.
Content Configuration
Content Type Selection
Choose which type of product content to display using the Content Type dropdown in the Options panel:
Product Description – Displays the full product description with detailed information, features, and specifications
Short Description – Shows the brief product overview typically used for quick product summaries
The block automatically retrieves the appropriate content from your DigiCommerce product data when viewed on actual product pages.
Text Alignment
Control how the content aligns within its container using the responsive alignment controls:
Left – Aligns content to the left edge of the container
Center – Centers the content horizontally
Right – Aligns content to the right edge
Justify – Spreads text evenly across the full width
Style Customization
Color Settings
Configure text and link colors through the Colors panel with normal and hover state options:
Normal State Colors:
Text Color – Set the primary color for product description text
Link Color – Choose the color for hyperlinks within the product content
Hover State Colors:
Link Hover Color – Define the color links change to when users hover over them
All color controls include alpha transparency options for advanced styling effects.
Typography Controls
Customize how the product content text appears using comprehensive typography settings:
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
Typography settings apply independently across desktop, tablet, and mobile devices for optimal readability on all screen sizes.
Spacing Configuration
Control the spatial relationships around your product content:
Padding – Internal spacing around the content area with individual controls for top, right, bottom, and left sides
Margin – External spacing around the entire block with responsive controls for each device type
Both padding and margin include linked/unlinked controls for setting uniform spacing or individual side values.
Advanced Features
Animation Effects
Add entrance animations to make the product content more engaging when users scroll to it. Choose from various animation types including fade, slide, zoom, and bounce effects. Use the Preview Animation button to test effects before publishing.
The animation system includes:
Animation Effect – Select from none or various entrance animations
Preview Functionality – Test animations in the editor before going live
Visibility Controls
Control when and where the product content appears using device-specific visibility options:
Hide on Desktop – Hide the block on desktop screens (992px and above)
Hide on Tablet – Hide the block on tablet devices (768px to 991px)
Hide on Mobile – Hide the block on mobile devices (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 – Create unique anchor links for direct linking to this specific content section
Additional CSS Classes – Add custom CSS classes for advanced styling or integration with theme features
Content Structure
The block automatically formats product content with proper HTML structure:
- Headings maintain hierarchy and styling
- Paragraphs include appropriate spacing
- Lists display with proper indentation
- Links inherit the color settings and hover effects
- Images within content maintain responsive behavior
Integration with DigiFusion
This block works seamlessly with the DigiFusion theme’s Site Builder feature, allowing you to create custom single product page templates. Use it in combination with other DigiCommerce blocks like Product Gallery, Product Price, and Add to Cart to build complete product page layouts.
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices. The block ensures optimal display across all screen sizes by allowing independent customization of typography, spacing, and alignment for each device type.
Editor Experience
In the WordPress editor, the block displays placeholder content that demonstrates the structure and styling of your product descriptions. The actual DigiCommerce product content automatically populates when viewing live product pages, maintaining all your custom styling and layout preferences.