The Product Price block displays the price for each WooCommerce product on your Single Product Templates. It dynamically pulls the current price from WooCommerce, including sale pricing, so shoppers always see accurate pricing without any manual updates on your part.
This block is designed exclusively for use on Single Product Templates. Beyond just displaying a price, you have full control over the typography, color, and alignment of both the regular price and the sale price — including the option to stack the original and sale price vertically so customers immediately see the discount.
Adding the Product Price Block to Your Pages
Follow these steps to add a Product Price block to your SeedProd Single Product Template:
Step 1: Add the Block
Under Design > Blocks > WooCommerce Template Tags, drag and drop the Product Price block into the desired section of your Single Product Template.
Step 2: Configure Content Settings
Once added, click on the Product Price block to open its settings. The Content tab lets you style the regular price display at the top, and then expand the Sale Price section to configure how discounted pricing appears.
Regular Price:
- Typography: Set the font family, size, weight, line height, and letter spacing for the product price text.
- Color: Set the text color of the regular price.
- Alignment: Set the horizontal alignment of the price — Left, Center, or Right. Supports per-device alignment for desktop, tablet, and mobile.
Sale Price:
- Sale Price Typography: Set the font family, size, weight, and style specifically for the sale price text, allowing it to look distinct from the regular price — for example, making it larger or bolder to emphasize the deal.
- Color: Set the text color of the sale price. Use a contrasting color such as red or green to draw attention to the discounted amount.
- Stacked: Toggle on to display the sale price below the original (crossed-out) price in a vertical stack rather than side by side. This layout makes it easier for shoppers to compare the original and discounted prices at a glance.
- Space Between: Set the spacing (1–100px) between the original price and the sale price when the Stacked option is enabled.
Step 3: Customize the Design
In the Advanced tab, you can control the spacing, attributes, and visibility of your Product Price block.
Spacing:
- Margin: Control the outer spacing around your Product Price block (Top, Right, Bottom, Left). This determines how much space appears between the price and surrounding elements on the product page.
- Padding: Adjust the inner spacing within your Product Price block (Top, Right, Bottom, Left). This creates breathing room between the price text and the block edges.
Attributes:
- CSS ID: Displays the auto-generated unique identifier for your Product Price block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting.
- Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS.
- Custom Attributes: Add any HTML attributes to the block wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., data-price|product).
Device Visibility:
- Hide on Desktop: Hide the Product Price block on desktop screens.
- Hide on Tablet: Hide the Product Price block on tablet devices.
- Hide on Mobile: Hide the Product Price block on mobile devices.
Animation Effects:
- Entrance Animation: Choose from various animation effects that play when the Product Price block scrolls into view. Options include Bounce, Fade In, Zoom In, Rotate In, and many more.
Step 4: Save Your Changes
Once you have finished configuring the Product Price block and customizing its appearance, make sure to save your work.
You’ve successfully added a Product Price block to your Single Product Template! The block automatically displays the correct price for every product, including sale pricing when active. Experiment with the sale price color, stacked layout, and typography settings to create a pricing display that highlights your deals and drives more conversions on your WooCommerce store.