Single Product Flow

The single product flow is the current-product version of the purchase family. WooDemoStoreBuilder registers a single product template from TestSingleWooProductTemplate; the template reads from {this.*} instead of loop-item bindings.

Flow Structure

Single product template
  CartCount
  CartNotices
  Product image from this.omewoo.media
  Product title and price
  AddToCartForm
    AttributeSelector loop over this.omewoo.attributes
    AddToCartButton in counter mode
    BuyNowButton

The current product is the WordPress queried object. That makes {this.id}, {this.title}, and {this.omewoo.*} the correct bindings.

Product Data Bindings

Binding	Meaning
{this.id}	Current product ID.
{this.title}	Current product title.
{this.omewoo.media.image.url}	Main product image URL.
{this.omewoo.media.image.alt}	Main product image alt text.
{this.omewoo.price.text}	Formatted product price text.
{this.omewoo.product.type}	Product type passed into the form.
{this.omewoo.attributes}	Attribute objects used by variable product selectors.

Use {this.*} only when the template is actually rendered in a product context. In loops, use {item.*} instead.

Variable Product Form

The demo single-product template builds an AddToCartForm with:

Form value	Source
product_id	{this.id}
product_type	{this.omewoo.product.type}
variation_id	Empty by default; selectors resolve selected variation state.
available / unavailable / stock_status	Product availability values passed into runtime state.

AttributeSelector loops over this.omewoo.attributes and uses radio mode in the demo template. The runtime variation sync helper keeps the selected option values, availability, and final variation ID aligned with the parent form.

Quantity And Submit

The demo uses AddToCartButton in counter mode. The button renders quantity controls and submits the parent form through trigger=form_submit. Quantity values are clamped to the authored min, max, and step before the Store API request is sent.

The product_single_simple_add scenario verifies this directly by entering a value above the max, then asserting the input value is clamped before the cart count changes.

Buy Now

BuyNowButton belongs inside AddToCartForm. It serializes the same form payload as the add-to-cart submit path, sends the Store API add request, and redirects to the authored checkout URL or the localized Woo checkout URL.

Do not use BuyNowButton as a standalone checkout link. Its behavior depends on the parent form state, especially for variable products.

E2E Coverage

Scenario	Verified behavior
product_single_simple_add	Quantity bounds are enforced before add-to-cart.
variable_product_requires_variation	Missing required variation keeps the form invalid.
variation_selector_button_radio	Button-radio selectors set available options and reject unavailable options.
buy_now_redirect	Buy-now sends the add request and redirects.
out_of_stock_product_disabled	Product availability disables the form submit path.