→ Aiden Mercer
→ Shopping Cart

Shopping Cart

A fully functional shopping cart that updates totals in real-time as users modify quantities or remove items.

This Example is contributed by Aiden Mercer, on 25-Mar-2025. It is responsive.

E-commerce Interactive Checkout Cart

<div class="shopping-cart-container">
  <h1>Your Shopping Cart</h1>
  <div class="cart-summary">
    <p id="item-count">3 items in your cart</p>
  </div>
  
  <div class="cart-items">
    <div class="cart-item" data-id="1" data-price="49.99">
      <div class="item-image">
        <img src="https://via.placeholder.com/80" alt="Product 1">
      </div>
      <div class="item-details">
        <h3>Wireless Headphones</h3>
        <p class="item-description">Noise cancelling with 20hr battery life</p>
        <p class="item-price">$49.99</p>
      </div>
      <div class="item-quantity">
        <button class="quantity-btn minus">-</button>
        <input type="number" class="quantity-input" value="1" min="1" max="10">
        <button class="quantity-btn plus">+</button>
      </div>
      <div class="item-total">
        <p>$<span class="item-total-price">49.99</span></p>
      </div>
      <button class="remove-item">×</button>
    </div>
    
    <div class="cart-item" data-id="2" data-price="24.50">
      <div class="item-image">
        <img src="https://via.placeholder.com/80" alt="Product 2">
      </div>
      <div class="item-details">
        <h3>Graphic T-Shirt</h3>
        <p class="item-description">100% cotton, machine washable</p>
        <p class="item-price">$24.50</p>
      </div>
      <div class="item-quantity">
        <button class="quantity-btn minus">-</button>
        <input type="number" class="quantity-input" value="2" min="1" max="10">
        <button class="quantity-btn plus">+</button>
      </div>
      <div class="item-total">
        <p>$<span class="item-total-price">49.00</span></p>
      </div>
      <button class="remove-item">×</button>
    </div>
    
    <div class="cart-item" data-id="3" data-price="89.99">
      <div class="item-image">
        <img src="https://via.placeholder.com/80" alt="Product 3">
      </div>
      <div class="item-details">
        <h3>Smart Watch</h3>
        <p class="item-description">Water resistant with heart rate monitor</p>
        <p class="item-price">$89.99</p>
      </div>
      <div class="item-quantity">
        <button class="quantity-btn minus">-</button>
        <input type="number" class="quantity-input" value="1" min="1" max="10">
        <button class="quantity-btn plus">+</button>
      </div>
      <div class="item-total">
        <p>$<span class="item-total-price">89.99</span></p>
      </div>
      <button class="remove-item">×</button>
    </div>
  </div>
  
  <div class="cart-footer">
    <div class="subtotal">
      <p>Subtotal: $<span id="subtotal-amount">188.98</span></p>
      <p>Shipping: $<span id="shipping-amount">5.99</span></p>
      <p>Tax: $<span id="tax-amount">15.12</span></p>
    </div>
    <div class="total">
      <h2>Total: $<span id="total-amount">210.09</span></h2>
    </div>
    <div class="cart-actions">
      <button id="continue-shopping">Continue Shopping</button>
      <button id="checkout-btn">Proceed to Checkout</button>
    </div>
  </div>
</div>

Related Examples

Responsive Shopping Cart Template

Author:
Anonymous

3 weeks ago
Responsive Product Card Grid with Image and Pricing Details
A responsive product card grid layout showcasing product images with detailed pricing information, perfect for e-commerce websites and online stores.

Author:
Julian Parker

1 month ago
Product Grid for Ecommerce Website
Premium product grid with hover animation

Author:
Anika

2 months ago
Responsive Feature Showcase Grid

Author:
Anonymous

5 days ago
Product Card with Hover Effects
Premium product display component with elegant typography, animated details, and seamless add-to-cart functionality.

Author:
Prajwal Hallale

2 months ago
Responsive CSS Grid Layout
Create a fully responsive grid layout using CSS Grid. Easily adjust the number of columns for different screen sizes.

Author:
Jaxon Green

2 months ago
Features list with icons

Author:
Jordan McKenzie

2 months ago
Product Carousel with 3D Hover Effect
Showcase your products with an interactive 3D carousel. Features smooth animations and hover effects for a captivating user experience.

Author:
Oliver

2 months ago
Bold Impact Stats Showcase for Product Metrics
A visually striking statistics component with bold typography and modern design to highlight your product's key performance metrics and achievements.

Author:
Alex Morgan

1 month ago
Elegant Product Features List with Inner Border Styling
Showcase your product's key selling points with this clean features list that uses subtle inner borders for improved readability and visual organization.

Author:
Alex Morgan

1 month ago
Feature-rich Services Grid for Company Websites
A responsive services component showcasing your business offerings with clear icons and descriptions, perfect for company websites.

Author:
Marcus Hendricks

4 weeks ago
Product Showcase Card

Author:
Jordan McKenzie

1 month ago

Didn't find component you were looking for?

Search from 500+ components