An "Add to Cart" button that remains active on a product with stock = 0 lets customers complete a purchase for an item that cannot be fulfilled. The failure appears at shipping time, not at checkout, meaning the customer has already paid and must wait for a refund. For schema.org structured data (schema-org Offer), availability: OutOfStock is a required signal for Google Shopping to suppress the listing from purchase-intent results — without it, out-of-stock products appear in paid shopping placements and generate click costs with no conversion. The Accessibility Fundamentals audit requires disabled interactive elements to be visually and semantically distinct, so an always-enabled button also creates an accessibility gap.
High because customers can place orders for zero-stock products, triggering fulfillment failures and refund workflows that cost more to resolve than the original sale was worth.
Add conditional rendering in src/components/product/ProductCard.tsx based on product.stock, and disable the button semantically with the disabled attribute — not just visually with CSS opacity.
{product.stock > 0 ? (
<button onClick={addToCart}>Add to Cart</button>
) : (
<button disabled aria-disabled="true" className="opacity-50 cursor-not-allowed">
Out of Stock
</button>
)}
Apply the same gate in src/app/products/[slug]/page.tsx. Also update your schema.org JSON-LD to reflect availability dynamically — see ecommerce-catalog.search-discovery.schema-org-markup for the markup pattern.
ID: ecommerce-catalog.inventory.out-of-stock-marking
Severity: high
What to look for: Count all product display components in the codebase (src/components/product/ProductCard.tsx, src/app/products/[slug]/page.tsx, src/components/product/ProductList.tsx). For each component, check whether products with stock = 0 are visually distinguished: look for conditional rendering based on stock level (disabled button, "Out of Stock" label, faded styling, or filtering from listings). Enumerate each component and its stock-awareness status.
Pass criteria: When a product's stock is 0, at least 1 product display component marks it as out-of-stock (disabled "Add to Cart" button, "Out of Stock" label, or reduced opacity). Count all product display components and report: "X of Y product display components handle out-of-stock state."
Fail criteria: Products with stock = 0 are displayed identically to in-stock products in all display components — no visual distinction, no disabled state, and "Add to Cart" remains active.
Skip (N/A) when: Never — customers must know if a product is unavailable.
Cross-reference: For out-of-stock SEO implications, the SEO Fundamentals audit covers availability markup in structured data.
Cross-reference: For disabled button accessibility, the Accessibility Fundamentals audit covers interactive element states and ARIA attributes.
Cross-reference: For out-of-stock schema.org markup, the check ecommerce-catalog.search-discovery.schema-org-markup in this audit covers availability structured data.
Detail on fail: "No out-of-stock marking found in src/components/product/ProductCard.tsx — product with stock = 0 displays same as in-stock" or "'Add to Cart' button in src/app/products/[slug]/page.tsx is enabled even when stock = 0"
Remediation: Add conditional rendering in src/components/product/ProductCard.tsx:
{product.stock > 0 ? (
<button onClick={addToCart}>Add to Cart</button>
) : (
<div className="text-gray-500 opacity-50">
<span>Out of Stock</span>
<button disabled>Add to Cart</button>
</div>
)}