Log in Start Building Free

P

woo-variant-picker

Variant Picker

Select product options and variations.

Setup steps

Open the FramerWoo plugin and insert Variant Picker.
Place this inside a product CMS context so it can read the current product automatically.
Configure the component behavior in Framer's property panel.
Style its default, responsive, loading, and empty states on canvas.

Variant Picker displayed on a Framer product card with product and variation fields connected — Insert Variant Picker inside the product CMS context, then connect Product ID and Variations JSON.

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 Variant Picker component — Variant Picker controls for product context, variation data, display fields, option groups, and picker behavior.

Variant Picker Style controls showing label, color, border, shadow, and selected-state options in Framer — Open Picker Style to configure labels, colors, borders, shadows, and selected option states.