<div class="cart-wrapper">
<div class="cart-icon">
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
<span class="badge">2</span>
</div>
<div class="cart-dropdown">
<div class="cart-item">
<img src="https://placehold.co/50x50/3b82f6/ffffff?text=1" alt="Item">
<div class="item-details">
<h4>Wireless Mouse</h4>
<span>1 x $25.00</span>
</div>
<span class="remove">×</span>
</div>
<div class="cart-item">
<img src="https://placehold.co/50x50/ec4899/ffffff?text=2" alt="Item">
<div class="item-details">
<h4>Keyboard</h4>
<span>1 x $45.00</span>
</div>
<span class="remove">×</span>
</div>
<div class="cart-total">
<span>Total:</span>
<strong>$70.00</strong>
</div>
<button class="checkout-btn">Checkout</button>
</div>
</div>
Back to Snippets
Shopping Cart Dropdown CSS
Increase conversions with this accessible shopping cart dropdown. When users hover over the cart icon, they see a summary of their items and a clear checkout button, reducing friction in the buying process.
446