FrameWoo
Components / Product
P
woo-product-breakdown-chart

Product Breakdown Chart

Display the rating distribution chart for a product.

Setup steps

  1. Open the FramerWoo plugin and insert Product Breakdown Chart.
  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 Breakdown Chart displayed in a Framer customer reviews summary with its property controls open
Insert Product Breakdown Chart in a review summary to display the rating distribution for the current product.

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 Breakdown Chart component
Product Breakdown Chart controls for review data, star counts, colors, typography, spacing, bar size, and radius.