FrameWoo
Components / Product
P
woo-add-to-cart

Add To Cart

Add the current product to the cart.

Setup steps

  1. Open the FramerWoo plugin and insert Add To Cart.
  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.
Add To Cart displayed on a Framer product card with product and stock fields connected in the property panel
Insert Add To Cart inside the product CMS context, then connect Product ID, product type, and stock status.

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 Add To Cart component
Add To Cart controls for product context, cart behavior, button labels, states, and icon content.
Add To Cart Button Style controls showing button colors and interaction states in Framer
Open Button Style to configure default, hover, success, error, and disabled button states.