The DigiCommerce Product Features Block displays product specifications and details in a clean, organized table format. This block is specifically designed for DigiCommerce product pages and automatically pulls feature data from your digital products. It’s perfect for showcasing technical specifications, licensing information, file details, and other product attributes. This block works seamlessly with our DigiFusion theme and its Pro version for creating custom single product templates with the Site Builder feature.
Adding the DigiCommerce Product Features Block
Navigate to your DigiCommerce product page or template in the block editor. Click the block inserter (+) and search for “Product Features” in the DigiBlocks DigiCommerce category. The block displays sample feature data in the editor, showing how product specifications will appear on the frontend with actual product information.
Content Configuration
Display Options
Control the visibility and format of your features table through the Content panel:
Show Title – Toggle to display or hide the features section heading
Title Text – Customize the heading text that appears above the features table
Title Tag – Select the HTML tag for the title (H1, H2, H3, H4, H5, H6, DIV, SPAN, or P)
Layout Settings
Configure the table appearance in the Layout section:
Alternating Row Colors – Enable alternating background colors for improved readability across table rows
Color Customization
Basic Colors
Set colors for different elements through the Colors style panel:
Title Color – Choose the color for the features section heading
Feature Name Color – Set the color for feature labels in the left column
Feature Value Color – Define the color for feature values in the right column
Background Color – Set the overall background color for the features table
Alternating Row Color – Choose the background color for alternating rows when enabled
Border Color – Select the color for table borders and dividers
Typography Settings
Title Typography
Customize the features section heading appearance:
Font Family – Select from available Google Fonts for the title
Font Size – Responsive controls with pixel, em, or rem units
Font Weight – Choose 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
Feature Name Typography
Style the feature labels independently:
Font Family – Separate font selection for feature names
Font Size – Responsive size controls for feature labels
Font Weight – Independent weight settings
Font Style – Normal or italic options
Text Transform – Text case transformation options
Text Decoration – Decoration effects for feature names
Line Height – Line spacing controls
Letter Spacing – Character spacing adjustments
Feature Value Typography
Configure the feature values styling:
Font Family – Choose fonts specifically for feature values
Font Size – Responsive controls for value text size
Font Weight – Weight options for feature values
Font Style – Style settings for value text
Text Transform – Case transformation for values
Text Decoration – Decoration options for feature values
Line Height – Line spacing for value text
Letter Spacing – Character spacing for values
Spacing Controls
Block Spacing
Manage the overall spacing around the features table:
Padding – Internal spacing within the block container with responsive controls
Margin – External spacing around the entire features block
Cell Spacing
Control spacing within the table structure:
Cell Padding – Internal spacing within each table cell for better text positioning and readability
Border and Visual Effects
Border Settings
Customize the table borders and visual structure:
Border Width – Set thickness for table borders with individual side controls
Border Radius – Round the corners of the features table container
Animation Effects
Add visual interest with entrance animations:
Animation Effect – Choose from various animation types including fade, slide, zoom, and bounce effects
Animation Preview – Test your selected animation in the editor before publishing
The animation triggers when users scroll the features table into view, creating an engaging experience that draws attention to your product specifications.
Advanced Settings
Visibility Controls
Control when the features table appears across different devices:
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 while remaining completely hidden on the frontend.
HTML and CSS Customization
HTML Anchor – Add a unique anchor ID for direct linking to the features section
Additional CSS Classes – Include custom CSS classes for advanced styling and integration with custom themes
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices. Adjust typography sizes, spacing, and layout elements independently for each screen size to ensure optimal display across all devices.
DigiCommerce Integration
The features block automatically connects with your DigiCommerce product data, pulling specifications and details from your product settings. Ensure your DigiCommerce products have feature information properly configured to display relevant data instead of the placeholder content shown in the editor.
Template Usage
This block is ideal for single product templates when used with DigiFusion theme’s Site Builder feature. Create custom product page layouts that showcase features alongside other product information blocks for a complete shopping experience.