The WooCommerce Product Content Block displays product descriptions and short descriptions with comprehensive typography and styling controls. This DigiBlocks WooCommerce category block automatically pulls content from WooCommerce products and presents it in a fully customizable format with responsive design and advanced styling options.
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 content appears throughout your WooCommerce store.
Adding the Product Content Block
Navigate to any post, page, or custom template where you want to display WooCommerce product content. Click the block inserter (+) and search for “Product Content” in the DigiBlocks WooCommerce category. The block will be added with placeholder content that demonstrates how the actual product description will appear on single product pages.
Content Configuration
Content Type Selection
Choose which type of product content to display using the Content Type dropdown:
Product Description – Displays the full product description content, typically used for detailed product information, specifications, features, and comprehensive details
Product Short Description – Shows the brief product summary, commonly used for quick overviews and key selling points displayed prominently on product pages
The block automatically adapts its placeholder content based on your selection to show you exactly how the content will appear on the frontend.
Typography Styling
Configure how the product content text appears with comprehensive typography controls:
Font Family – Select from Google Fonts or system fonts for optimal readability and brand consistency
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 16px font size on desktop, 15px on tablet, and 14px on mobile with line height values of 1.6, 1.5, and 1.4 respectively for optimal readability across all devices.
Color Customization
Text Color – Set the color for all product content text with support for alpha transparency, allowing you to create subtle text effects that enhance readability while maintaining design consistency.
Content Formatting
The block automatically applies appropriate styling to common HTML elements within product content:
Paragraph Styling
Paragraph Spacing – Automatically applies 1em bottom margin to paragraphs with the last paragraph having no bottom margin for clean spacing
List Formatting
Unordered and Ordered Lists – Applies 1em top and bottom margins with 2em left padding for proper list indentation
List Items – Each list item receives 0.5em bottom margin for improved readability
Heading Styles
All Heading Levels – H1 through H6 headings receive appropriate margins (1.5em top, 0.5em bottom) and font weight of 600
First Heading Exception – First headings in content have no top margin to prevent unwanted spacing at the content beginning
Spacing Controls
Container Spacing
Padding – Control internal spacing within the content container
Top Padding – Space above the content
Right Padding – Space to the right of the content
Bottom Padding – Space below the content
Left Padding – Space to the left of the content
Margin – Set external spacing around the entire content block
Top Margin – Space above the content block
Right Margin – Space to the right of the content block
Bottom Margin – Space below the content block
Left Margin – Space to the left of the content block
All spacing controls include responsive options for precise control across desktop, tablet, and mobile devices.
Advanced Features
Animation Effects
Add engaging entrance animations to the product content:
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 content 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 content section, useful for creating table of contents or quick navigation links
Additional CSS Classes – Add custom CSS classes for advanced styling or targeting with custom code
Content Integration
The block seamlessly integrates with WooCommerce product data:
Automatic Content Detection – Pulls the appropriate content type from the current product’s description or short description fields
HTML Content Support – Preserves all HTML formatting, links, images, and embedded media within product descriptions
Editor Content Preview – Maintains visual consistency between the WordPress editor content and frontend display
Fallback Handling – Gracefully handles missing content by displaying appropriate placeholder text when no product content is available
Content Editing
Product content is managed through the standard WooCommerce product editing interface:
Full Description – Edit in the main product description editor with full HTML and media support
Short Description – Modify in the product short description field for brief summaries
Content Formatting – All WordPress editor formatting, including blocks, shortcodes, and HTML elements, is preserved and displayed correctly
Responsive Design
All styling options include device-specific controls for desktop, tablet, and mobile screens. Typography sizes, spacing values, and layout elements can be adjusted independently for each breakpoint to ensure optimal content readability across all devices.
The block maintains its functionality and styling consistency whether used in single product templates, product comparison pages, or custom WooCommerce layouts created with the DigiFusion theme’s Site Builder feature.
SEO Benefits
Structured Content – Properly formatted product content contributes to better search engine understanding and indexing
Rich Content Support – Full HTML support allows for enhanced content including structured data, links, and media
Content Hierarchy – Automatic heading styling maintains proper content structure for SEO benefits
The block ensures that your product content maintains optimal formatting for both user experience and search engine optimization.