The DigiCommerce Product Price Block displays product pricing information for DigiCommerce products with comprehensive styling and display options. This block is part of the DigiBlocks DigiCommerce category and is perfect for creating custom product templates and pages with our DigiFusion theme and its Pro version.
Adding the Product Price Block
Navigate to the post or page where you want to display product pricing. Click the block inserter (+) and search for “Product Price” in the DigiBlocks DigiCommerce category. The block will be added with placeholder pricing that demonstrates how the actual product price will appear on the frontend.
Display Configuration
Price Display Options
Control which pricing elements to show using the toggle switches in the Options panel:
Show “From” Label – Display a “From:” prefix for variable products with multiple pricing options
Show Sale Price – Display the discounted price when the product is on sale
Show Regular Price – Show the original price alongside the sale price for comparison
Show Currency Symbol – Include the currency symbol with the price display
Price Alignment
Set the horizontal alignment of the price display using the alignment control:
Left – Align price to the left side of the container
Center – Center the price within the container
Right – Align price to the right side of the container
Color Customization
Configure colors for different price elements in the Colors style panel:
From Label Color – Set the color for the “From:” text prefix
Price Color – Choose the color for the main price display
Sale Price Color – Set a specific color for discounted prices
Regular Price Color – Choose the color for the original price when crossed out
Currency Color – Set the color for currency symbols
Background Color – Add a background color to the entire price container
Typography Settings
From Label Typography
Style the “From:” label text independently:
Font Family – Select 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
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
Price Typography
Control the main price display typography:
Font Family – Choose font family for price text
Font Size – Set responsive font sizes for different devices
Font Weight – Select font weight for price emphasis
Font Style – Normal or italic styling options
Text Transform – Text case transformation options
Text Decoration – Text decoration effects
Line Height – Adjust line spacing for better readability
Letter Spacing – Fine-tune character spacing
Regular Price Typography
Style the crossed-out regular price separately:
Font Family – Independent font selection for regular price
Font Size – Responsive sizing controls
Font Weight – Font weight options for regular price
Font Style – Styling options for regular price display
Text Transform – Text transformation settings
Text Decoration – Includes line-through by default for crossed-out effect
Line Height – Line spacing controls
Letter Spacing – Character spacing adjustments
Spacing Controls
Padding
Set internal spacing around the price container:
Top – Space above the price content
Right – Space to the right of the price content
Bottom – Space below the price content
Left – Space to the left of the price content
Margin
Control external spacing around the entire price block:
Top – Space above the price block
Right – Space to the right of the price block
Bottom – Space below the price block
Left – Space to the left of the price block
Border Radius
Round the corners of the price container with pixel or percentage values for each corner independently.
Animation Effects
Add entrance animations to make the price display more engaging when users scroll to it. Choose from various animation options including fade, slide, zoom, and bounce effects. Use the preview functionality to test animations before publishing.
Visibility Controls
Control block visibility across different devices:
Hide on Desktop – Hide the price block on desktop screens (992px and above)
Hide on Tablet – Hide the price block on tablet screens (768px to 991px)
Hide on Mobile – Hide the price block on mobile screens (767px and below)
Hidden elements appear with reduced opacity in the editor for easy editing while remaining completely hidden on the frontend.
Advanced Settings
HTML Anchor
Create a unique web address for the price block by entering an anchor ID. This allows direct linking to the specific price section of your page.
Additional CSS Classes
Add custom CSS classes to the price block for additional styling or JavaScript targeting. Separate multiple classes with spaces.
DigiCommerce Integration
The Product Price Block automatically retrieves pricing information from DigiCommerce product data, including:
Regular product pricing for simple products
Variable pricing ranges for products with multiple options
Sale prices and discount calculations
Currency symbols and positioning based on DigiCommerce settings
The block serves as a placeholder in the editor, with actual pricing data populated dynamically on the frontend based on the current product context.
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices. Adjust typography sizes, spacing, colors, and alignment independently for each screen size to ensure optimal price display across all devices.