Components / Product
P
woo-product-price

Product Price

Show WooCommerce pricing and sale states.

Setup steps

  1. Open the FramerWoo plugin and insert Product Price.
  2. Place this inside a product CMS context so it can read the current product automatically.
  3. Configure the component behavior in Framer's property panel.
  4. Style its default, responsive, loading, and empty states on canvas.
Product Price inserted on a Framer product card with its CMS fields connected in the property panel
Insert Product Price inside the product CMS context, then connect its price fields.

Property panel

Use Framer's controls to connect context and match your visual system.

Context
Controls the WooCommerce or CMS data source used by the component.
Content
Controls visible labels, values, formatting, and empty-state copy.
Style
Controls typography, colors, spacing, alignment, and responsive behavior.
Framer property controls for the Product Price component
Product Price controls for CMS bindings, sale display, currency formatting, and typography.
Product Price Style controls showing font, color, and spacing options in Framer
Open Price Style to configure regular, sale, and small text styles, plus colors and spacing.