How can I prevent products from appearing as sold out until the purchase is complete on my Webflow site?
TL;DR
- Rely on Webflow’s built-in inventory tracking, which marks items as sold out only after purchase completion.
- Avoid custom logic or third-party tools that alter inventory before checkout, and ensure visibility settings are based on actual stock count post-transaction.
To prevent products from appearing as sold out before the purchase is complete in Webflow, you must manage inventory visibility based on finalized purchases, not when an item is merely added to the cart.
1. Understand Webflow's Default Inventory Behavior
- Webflow marks stock as reduced only after the order is completed, not when a user adds a product to their cart.
- Products show as sold out when the inventory reaches zero after purchase.
2. Avoid Manual Sold-Out Tags or Custom Conditions
- If you added any custom sold-out logic (like using conditional visibility on custom fields or CMS flags), make sure that logic only activates after the order is fulfilled.
- Trust the built-in Webflow product inventory tracking by enabling it for your products.
3. Enable Inventory Tracking Properly
- Go to Ecommerce → Products and open any product.
- Enable Track inventory if it’s not already.
- Enter the inventory quantity (e.g., 10 units).
- Products will only become unavailable when quantity = 0 after successful checkout.
4. Confirm "Sold Out" Visibility Settings
- On your product or collection templates, check the conditional visibility.
- Webflow uses this logic natively: Show 'Sold Out' label only when Current Product inventory = 0.
- To customize the label or appearance, edit those elements but leave the conditional logic intact.
5. Avoid Third-Party Integrations Holding Inventory
- If you use tools like Foxy.io, Shopify, or custom checkout flows, they might have different behaviors.
- Make sure only completed transactions reduce the inventory count. Review the integration's documentation or settings.
6. Test the Complete Purchase Flow
- Do a test purchase to verify how and when inventory updates.
- Confirm that products only change to "sold out" after the transaction is completed and Webflow updates the inventory count.
Summary
Webflow’s native inventory tracking only marks items as sold out after the purchase is finalized, so there’s no need to prevent pre-checkout “sold out” states—unless you're using custom logic or third-party tools. In that case, make sure any inventory-reducing action only triggers after payment is processed.