The DigiCommerce Product Meta Block displays essential product taxonomy information including categories and tags on DigiCommerce product pages. This block is found in the DigiBlocks DigiCommerce category and is perfect for creating custom single product templates with the DigiFusion theme and its Pro version‘s site builder feature.
Adding the DigiCommerce Product Meta Block
Navigate to your product page or template where you want to display product meta information. Click the block inserter (+) and search for “DigiCommerce Product Meta” in the DigiBlocks DigiCommerce category. The block displays placeholder content in the editor, showing how the actual product categories and tags will appear on the frontend.
Content Configuration
Display Options
Control which meta elements to show using the toggles in the Content panel:
Show Categories – Displays the product categories with customizable styling
Show Tags – Shows product tags as clickable links
Custom Labels
When categories are enabled, customize the label text that appears before the category list using the Categories Label field. Similarly, when tags are enabled, set custom text for the Tags Label field. These labels help visitors understand the type of meta information being displayed.
Layout Settings
Layout Types
Choose between two layout orientations in the Layout panel:
Vertical Layout – Stacks categories and tags in separate rows for a clean, organized appearance
Horizontal Layout – Places categories and tags side by side, with automatic wrapping for longer lists
Alignment Options
Control how the meta information aligns within its container:
Left – Aligns content to the left side
Center – Centers the meta information
Right – Aligns content to the right side
Spacing Controls
Item Spacing – Adjusts the gap between category and tag sections with responsive controls from 0 to 50 pixels
Color Customization
Normal State Colors
Configure default colors in the Colors style panel:
Label Color – Sets the color for category and tag labels
Category Color – Controls the text color of category links
Category Background – Sets background color for category links
Tag Color – Defines the text color of tag links
Tag Background – Controls background color for tag links
Hover Effects
Use the Hover tab to define color changes when users interact with meta links:
Category Hover Color – Text color for categories on hover
Category Hover Background – Background color for categories on hover
Tag Hover Color – Text color for tags on hover
Tag Hover Background – Background color for tags on hover
Typography Settings
Label Typography
Style the category and tag labels independently:
Font Family – Choose from available Google 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 options
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
Value Typography
Configure how the category and tag links appear:
Font Family – Independent font selection for meta values
Font Size – Separate responsive sizing for links
Font Weight – Different weight options from labels
Font Style – Style the links independently
Text Transform – Transform case for category and tag text
Text Decoration – Control text decoration for links
Line Height – Set appropriate line spacing for readability
Letter Spacing – Fine-tune character spacing for links
Advanced Styling
Spacing Controls
Set precise spacing using responsive controls:
Padding – Internal spacing around the entire meta block
Margin – External spacing around the meta container
Border Radius – Round the corners of category and tag links
All spacing controls include responsive settings for desktop, tablet, and mobile devices.
Animation Effects
Add entrance animations to make the product meta more engaging when users scroll to it. Choose from fade, slide, zoom, and bounce animations with preview functionality to test effects before publishing.
Visibility Controls
Control block visibility across different devices:
Hide on Desktop – Hides the block on desktop screens
Hide on Tablet – Conceals the block on tablet devices
Hide on Mobile – Removes the block from mobile displays
Hidden elements appear with reduced opacity in the editor for easy editing, while visibility changes only take effect on the frontend.
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices. Adjust typography sizes, spacing, colors, and layout elements independently for each screen size to ensure optimal display across all devices.
Frontend Behavior
On the frontend, the block automatically retrieves and displays the actual categories and tags assigned to the current DigiCommerce product. Category and tag links are fully functional, directing visitors to archive pages showing related products. The block requires DigiCommerce to be active and will only display content on actual product pages.