Shopping Cart V06

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A four-step checkout in one card with a connected step indicator, Back and Continue buttons and a running total in the footer. Each step is checked with the browser's native constraint validation before moving on, and invalid fields are marked and focused. The cart step has working quantity steppers and remove buttons, the shipping step's delivery speed changes the total, and the last step shows an order confirmation built from the entered details.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 234 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Step indicator with aria-current="step" and completed states
• Per-step native validation with aria-invalid and focus on the first error
• Heading focus and live announcements on every step change
• Delivery speed updates shipping and total
• Card number and MM/YY expiry masks
• Confirmation step filled from the form