Skip to main content

Product Archive

A product archive is a list of Woo products. Build it with a normal product loop, then place Woo purchase components inside each loop item.

Minimum Structure​

Archive template
  CartCount
  CartNotices
  Product loop over product posts
    Product image
    Product title
    ProductProvider bound to {item.omewoo}
      ProductPrice, ProductSku, ProductAvailability, ProductDescription
      AddToCartForm
        AttributeSelector loop for variable products
        AddToCartButton

Use {item.*} because each product card is inside the loop.

Product archive card
{#loop products as item}
Product image: {item.omewoo.media.image.url}
Product title: {item.title}
<OmeWooProductProvider product="{item.omewoo}">
  {#slot default}
    <OmeWooProductPrice content="{item.omewoo.price.html}" />
    <OmeWooProductSku content="{item.omewoo.product.sku}" />
    <OmeWooProductAvailability content="{item.omewoo.purchase.availabilityHtml}" />
    <OmeWooProductDescription content="{item.omewoo.description.shortHtml}" />

    <OmeWooAddToCartForm product='{{"product_id":"{item.id}","product_type":"{item.omewoo.product.type}","variants":{item.omewoo.variants}}}'>
      {#slot default}
        {#loop item.omewoo.attributes as attribute}
          <OmeWooAttributeSelector target='{{"attribute":{attribute}}}' />
        {/loop}

        <OmeWooAddToCartButton behavior='{{"mode":"counter","trigger":"form_submit"}}' />
      {/slot}
    </OmeWooAddToCartForm>
  {/slot}
</OmeWooProductProvider>
{/loop}

Step 1: Create A Product Loop​

The archive page or archive-product template needs a loop that queries Woo product posts. Inside that loop, the current product is available as item.

BindingMeaning
{item.id}Current product ID.
{item.title}Current product title.
{item.omewoo.media.image.url}Product image URL.
{item.omewoo.media.image.alt}Product image alt text.
{item.omewoo.price.html}Server-formatted price HTML for Product Price.
{item.omewoo.product.sku}Base SKU for Product SKU.
{item.omewoo.purchase.availabilityHtml}Woo availability HTML for Product Availability.
{item.omewoo.description.shortHtml}Short base content for Product Description.
{item.omewoo.product.type}Product type used by purchase controls.
{item.omewoo.attributes}Variable-product attribute objects for selector loops.
{item.omewoo.variants}Variation catalogue used by variable product forms.

Step 2: Put Product Purchase Inside The Card​

Bind one ProductProvider per card to the complete {item.omewoo} object when multiple product atoms need the same selected-variation state. The nearest-provider rule keeps repeated cards isolated.

The Provider is a real structural card container, so choose its structure.tag and use styling.class for card layout. Product readouts may sit directly in its default slot; only setters and purchase actions need the nested AddToCartForm boundary.

Use AddToCartForm inside that Provider when the card has a real purchase area. The form owns the product ID, product type, variation setters, and submit state. The add-to-cart button should use trigger=form_submit inside that form.

For simple products, a standalone AddToCartButton can work outside a form if you pass behavior.standalone_product.product_id. Existing archive forms without a Provider also remain supported. For mixed product lists, the Provider plus form pattern is easier because it shares derived variation state while retaining the released purchase flow.

Step 3: Add Variation Selectors When Needed​

Variable products expose selector rows under {item.omewoo.attributes}. Loop that array inside the form and pass each row into AttributeSelector.

The selector writes the selected option back into the nearest AddToCartForm. The form waits for required variation choices before it sends the add-to-cart request.

Step 4: Keep Cart Feedback Outside The Cards​

CartCount is placed above the product loop so successful add-to-cart actions from any card update one shared count. CartNotices is also outside the product cards, which gives the archive one live region for errors and success messages.

This pairing matters because product cards can be repeated many times, but cart state is global for the page.

Next References​