ecommerce volume-discount quantity tiers pricing bulk wholesale volume discount tiers bulk quantity wholesale pricing volume discount tier selector quantity-based pricing widget
Product Volume Discount Base
Fetch pattern JSON:
curl https://webspire.de/patterns/product-volume-discount/base.json base.html
<section class="ws-product-volume-discount ws-volume-discount rounded-2xl border border-slate-200 bg-[var(--ws-product-volume-discount-bg)] p-6">
<h3 class="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-500">Volume Discounts</h3>
<div class="space-y-2">
<!-- Tier 1 -->
<label class="flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 p-3 transition hover:border-blue-300 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50 dark:hover:border-blue-600 dark:has-[:checked]:border-blue-500 dark:has-[:checked]:bg-blue-900/20">
<div class="flex items-center gap-3">
<input type="radio" name="volume" class="text-blue-600 focus:ring-blue-500" checked>
<div>
<p class="text-sm font-medium text-slate-900">Buy 1 item</p>
<p class="text-xs text-slate-500">Regular price</p>
</div>
</div>
<p class="text-sm font-bold text-slate-900">€29.00</p>
</label>
<!-- Tier 2 -->
<label class="flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 p-3 transition hover:border-blue-300 dark:hover:border-blue-600">
<div class="flex items-center gap-3">
<input type="radio" name="volume" class="text-blue-600 focus:ring-blue-500">
<div>
<p class="text-sm font-medium text-slate-900">Buy 3 items <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700">Save 10%</span></p>
<p class="text-xs text-slate-500">€26.10 per item</p>
</div>
</div>
<div class="text-right">
<p class="text-xs text-slate-400 line-through">€87.00</p>
<p class="text-sm font-bold text-slate-900">€78.30</p>
</div>
</label>
<!-- Tier 3 -->
<label class="flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 p-3 transition hover:border-blue-300 dark:hover:border-blue-600">
<div class="flex items-center gap-3">
<input type="radio" name="volume" class="text-blue-600 focus:ring-blue-500">
<div>
<p class="text-sm font-medium text-slate-900">Buy 5 items <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700">Save 20%</span></p>
<p class="text-xs text-slate-500">€23.20 per item</p>
</div>
</div>
<div class="text-right">
<p class="text-xs text-slate-400 line-through">€145.00</p>
<p class="text-sm font-bold text-slate-900">€116.00</p>
</div>
</label>
<!-- Tier 4: Best value -->
<label class="relative flex cursor-pointer items-center justify-between rounded-xl border-2 border-amber-400 p-3 transition">
<span class="absolute -top-2.5 left-3 rounded-full bg-amber-400 px-2 py-0.5 text-[10px] font-bold uppercase text-amber-900">Best Value</span>
<div class="flex items-center gap-3">
<input type="radio" name="volume" class="text-blue-600 focus:ring-blue-500">
<div>
<p class="text-sm font-medium text-slate-900">Buy 10 items <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700">Save 30%</span></p>
<p class="text-xs text-slate-500">€20.30 per item</p>
</div>
</div>
<div class="text-right">
<p class="text-xs text-slate-400 line-through">€290.00</p>
<p class="text-sm font-bold text-slate-900">€203.00</p>
</div>
</label>
</div>
<button class="mt-4 w-full rounded-xl bg-[var(--ws-product-volume-discount-action-bg)] py-3 text-sm font-semibold text-[var(--ws-product-volume-discount-action-text)] hover:opacity-90">Choose this deal</button>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
ecommercevolume-discountquantitytierspricingbulkwholesale
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title. |
| tiers | Yes | Radio button tier options with pricing. |
| cta | Yes | Deal selection button. |