The WooCommerce Product Meta Block displays essential product metadata including SKU, categories, and tags with comprehensive styling controls and layout options. This DigiBlocks WooCommerce category block automatically pulls metadata from WooCommerce products and presents it in a fully customizable format with hover effects, flexible layouts, and responsive design.
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 product metadata appears throughout your WooCommerce store.
Adding the Product Meta Block
Navigate to any post, page, or custom template where you want to display WooCommerce product metadata. Click the block inserter (+) and search for “Product Meta” in the DigiBlocks WooCommerce category. The block will be added with placeholder metadata that demonstrates how the actual product information will appear on single product pages.
Content Configuration
Metadata Display Options
Control which product metadata elements to show using the toggles in the Content panel:
Show SKU – Displays the product’s Stock Keeping Unit identifier with customizable label text
Show Categories – Shows product categories as clickable links with customizable label text
Show Tags – Displays product tags as interactive elements with customizable label text
Custom Labels
When metadata elements are enabled, customize their labels:
SKU Label – Set custom text for the SKU field (default: “SKU:”)
Categories Label – Define custom text for the categories section (default: “Categories:”)
Tags Label – Configure custom text for the tags area (default: “Tags:”)
Layout Configuration
Layout Options
Choose how metadata elements are arranged using the Layout toggle group:
Vertical – Stacks metadata items in a single column with each element on its own line
Horizontal – Arranges metadata items in a row with flexible wrapping for smaller screens
Alignment Controls
Set how metadata items align within their container using responsive alignment controls:
Left – Aligns items to the left side of the container
Center – Centers items within the available space
Right – Aligns items to the right side of the container
Item Spacing
Control the gap between metadata items using responsive spacing controls with a range of 0-50 pixels for precise layout control.
Color Customization
Normal State Colors
Configure default colors in the Normal tab of the Colors panel:
Label Color – Sets the color for metadata labels (SKU:, Categories:, Tags:)
SKU Color – Controls the color of the SKU value text
SKU Background – Applies background color to the SKU value container
Category Color – Sets the color for category link text
Category Background – Defines background color for category links
Tag Color – Controls the color of tag link text
Tag Background – Sets background color for tag elements
Hover State Colors
Define interactive color changes in the Hover tab:
Category Hover Color – Color that category links change to on hover
Category Hover Background – Background color change for category links on hover
Tag Hover Color – Color that tag links change to on hover
Tag Hover Background – Background color change for tag elements on hover
All color controls support alpha transparency for creating sophisticated color effects.
Typography Styling
Label Typography
Configure how metadata labels appear 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 14px font size on desktop, 13px on tablet, and 12px on mobile with font weight of 600, uppercase text transform, and 0.5px letter spacing.
Value Typography
Style the metadata values independently from labels:
Font Family – Independent font selection for metadata values
Font Size – Separate responsive font sizing for values
Font Weight – Distinct weight options for metadata content
Font Style – Independent styling controls
Text Transform – Separate text transformation options
Text Decoration – Independent decoration controls
Line Height – Control line spacing for better readability
Letter Spacing – Fine-tune character spacing for values
Default settings include 14px font size on desktop, 13px on tablet, and 12px on mobile with a line height of 1.5 for optimal readability.
Spacing Controls
Container Spacing
Padding – Control internal spacing within the metadata container
Top Padding – Space above metadata content
Right Padding – Space to the right of metadata content
Bottom Padding – Space below metadata content
Left Padding – Space to the left of metadata content
Margin – Set external spacing around the entire metadata block
Top Margin – Space above the metadata block
Right Margin – Space to the right of the metadata block
Bottom Margin – Space below the metadata block
Left Margin – Space to the left of the metadata block
Border Radius
Apply rounded corners to metadata elements using responsive border radius controls supporting both pixel and percentage units. This affects the visual styling of SKU values, category links, and tag elements.
Advanced Features
Animation Effects
Add engaging entrance animations to the metadata display:
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 metadata block on desktop screens (992px and above)
Hide on Tablet – Hides the block on tablet devices (768px to 991px)
Hide on Mobile – Removes the block 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 metadata section
Additional CSS Classes – Add custom CSS classes for advanced styling or targeting
Metadata Display Logic
The block automatically integrates with WooCommerce product data:
SKU Display – Shows the product’s unique identifier in a monospaced font with background styling for easy identification
Category Links – Displays product categories as clickable links that navigate to category archive pages
Tag Links – Shows product tags as interactive elements linking to tag archive pages
Fallback Handling – Gracefully handles missing metadata by hiding elements when no data is available
Link Functionality – Category and tag links maintain full WooCommerce functionality including proper permalink structure
Interactive Elements
Hover Effects
Category Hover – Smooth color transitions when users hover over category links provide visual feedback
Tag Hover – Tag elements respond to mouse interaction with color and background changes
Transition Animations – All hover effects include smooth 0.3s transitions for professional interaction
Link Behavior
Category and tag links maintain standard WooCommerce behavior, navigating to their respective archive pages while preserving the site’s navigation structure and SEO benefits.
Responsive Design
All styling options include device-specific controls for desktop, tablet, and mobile screens. Typography sizes, spacing values, color choices, and layout elements can be adjusted independently for each breakpoint to ensure optimal display across all devices.
The block maintains its functionality and styling consistency whether used in single product templates, product loops, or custom WooCommerce layouts created with the DigiFusion theme’s Site Builder feature.