Product Price
Product Price displays the current product's price, including the current and old-price treatments where WooCommerce supplies them. WooCommerce must be installed and active.
Add and configure Product Price
- Click Add, choose Product Price, and place it in the container.
- Place Product Price inside Product Builder.
- Configure Design > Layout > Stack Vertically and Space Between.
- Style Typography > Current Price and Old Price, then set Spacing.
- Save your changes.
Keep the required parent context
Product Price must be inside Product Builder, Fundamental Product Builder. Layout containers can sit between the parent and this element. Configure the product or checkout context on the parent.
This element has no children; use its own controls.
Controls
Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”
Design > Layout
| Setting | Purpose and options | Behavior |
|---|---|---|
| Stack Vertically | Breakpoint. | Shared |
| Space Between | Space between and unit. | Shared |
Design > Typography
| Setting | Purpose and options | Behavior |
|---|---|---|
| Current Price | typography controls. | See linked controls |
| Old Price | typography controls. | See linked controls |
Design > Spacing
| Setting | Purpose and options | Behavior |
|---|---|---|
| Spacing | spacing controls. | See linked controls |
Troubleshooting
The amount is wrong
Check the product's WooCommerce price and variation context. Design settings do not set the product's selling price.
The old price is absent
Check whether WooCommerce supplies an old price for the selected product and sale state.