The WooCommerce Product Price Block displays dynamic product pricing information with complete control over appearance and layout. This DigiBlocks WooCommerce category block automatically pulls pricing data from WooCommerce products and presents it in a customizable format that adapts to different product states including regular pricing, sale pricing, and currency display 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 prices appear throughout your WooCommerce store.
Adding the Product Price Block
Navigate to any post, page, or custom template where you want to display WooCommerce product pricing. Click the block inserter (+) and search for “Product Price” in the DigiBlocks WooCommerce 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 price elements to show using the toggles in the Display Options panel:
Show Sale Price – Displays the discounted price when a product is on sale
Show Regular Price – Shows the original price alongside the sale price for comparison
Show Currency Symbol – Controls whether the currency symbol appears with price values
Price Alignment
Choose how prices align within their container using the Alignment toggle group:
Left – Aligns prices to the left side of the container
Center – Centers prices within the available space
Right – Aligns prices to the right side of the container
Color Customization
The Colors style panel provides comprehensive color control for all price elements:
Price Color – Sets the color for the main price display
Sale Price Color – Defines the color specifically for sale prices
Regular Price Color – Controls the color of regular prices when shown alongside sale prices
Currency Color – Sets the color for currency symbols
Background Color – Applies a background color to the entire price container
All color controls support alpha transparency, allowing you to create semi-transparent color effects.
Typography Styling
Price Typography
Configure the main price display typography with comprehensive 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 24px font size on desktop, 22px on tablet, and 20px on mobile with a font weight of 600.
Regular Price Typography
When displaying both sale and regular prices, control the regular price typography independently:
Font Family – Independent font selection for regular prices
Font Size – Separate responsive font sizing
Font Weight – Distinct weight options for regular prices
Font Style – Independent styling controls
Text Transform – Separate text transformation options
Text Decoration – Includes line-through styling by default for struck-out regular prices
Line Height – Independent line height controls
Letter Spacing – Separate letter spacing adjustments
Default settings include 18px font size on desktop, 16px on tablet, and 14px on mobile with line-through decoration to indicate the original price.
Spacing Controls
Padding
Control internal spacing within the price container using responsive padding controls:
Top Padding – Space above the price content
Right Padding – Space to the right of price content
Bottom Padding – Space below the price content
Left Padding – Space to the left of price content
Margin
Set external spacing around the entire price block:
Top Margin – Space above the price block
Right Margin – Space to the right of the price block
Bottom Margin – Space below the price block
Left Margin – Space to the left of the price block
Border Radius
Round the corners of the price container with responsive border radius controls supporting both pixel and percentage units.
Advanced Features
Animation Effects
Add engaging entrance animations to the price 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 price 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 price block
Additional CSS Classes – Add custom CSS classes for advanced styling or JavaScript targeting
Price Display Logic
The block automatically adapts its display based on product pricing states:
Regular Products – Shows the standard price with currency symbol if enabled
Sale Products – Displays the sale price prominently, with the regular price shown as struck-through when both options are enabled
Variable Products – Shows price ranges or selected variation pricing depending on the product configuration
Currency Display – Respects WooCommerce currency settings and positioning preferences
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 display across all devices.
The block maintains its functionality and styling consistency whether used in product loops, single product pages, or custom WooCommerce templates created with the DigiFusion theme’s Site Builder feature.