How to make shopping cart in html

Step by step tutorial

The shopping cart page is designed to allow buyers to see all the products they have added to the shopping cart. It contains a detailed list of products and their prices, and is the last stop before customers order and pay.

Think of the shopping cart page as this moment. Just before you check out. If you have a shopping list, now is the time to check it to make sure you have all the items you want to buy. You do not have a credit card. But you know that if everything goes according to plan, your next stop will be at the checkout.

Make Better User Experience:

1. Allow the users to edit the number of items directly in the cart.
2. If cart is empty, provide product recommendations.
3. Allow the user to remove the product easily.
4. Provide the clear view of the total price of the cart.
5. Maintain proper visual hierarchy.
6. Allow the user to empty the cart by one click.

Step 1: Creating a card

HTML:

CSS:

body{
 margin: 0;
 padding: 0;
 background: linear-gradient(to bottom right, #E3F0FF, #FAFCFF);
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}.Cart-Container{
 width: 70%;
 height: 85%;
 background-color: #ffffff;
 border-radius: 20px;
 box-shadow: 0px 25px 40px #1687d933;
}

Preview:

Step 2: Adding card header

HTML:

 
Shopping Cart

 
Remove all

 

CSS:

.Header{
 margin: auto;
 width: 90%;
 height: 15%;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.Heading{
 font-size: 20px;
 font-family: ‘Open Sans’;
 font-weight: 700;
 color: #2F3841;
}
.Action{
 font-size: 14px;
 font-family: ‘Open Sans’;
 font-weight: 600;
 color: #E44C4C;
 cursor: pointer;
 border-bottom: 1px solid #E44C4C;
}

Preview:

Step 3: Adding a product details

HTML:

 

 



Step 4: Creating a counter
HTML:

 
+

 
2

 
-

 
CSS:
.counter{
 width: 15%;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.btn{
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: #d9d9d9;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 20px;
 font-family: ‘Open Sans’;
 font-weight: 900;
 color: #202020;
 cursor: pointer;
}
.count{
 font-size: 20px;
 font-family: ‘Open Sans’;
 font-weight: 900;
 color: #202020;
}
Preview:
Step 5: Adding a price section
HTML:

 
$2.99

 
Save for later

 
Remove

 
CSS:
.prices{
 height: 100%;
 text-align: right;
}
.amount{
 padding-top: 20px;
 font-size: 26px;
 font-family: ‘Open Sans’;
 font-weight: 800;
 color: #202020;
}
.save{
 padding-top: 5px;
 font-size: 14px;
 font-family: ‘Open Sans’;
 font-weight: 600;
 color: #1687d9;
 cursor: pointer;
}
.remove{
 padding-top: 5px;
 font-size: 14px;
 font-family: ‘Open Sans’;
 font-weight: 600;
 color: #E44C4C;
 cursor: pointer;
}
Preview:
Step 6: Duplicate cart item
Follow the steps from 3 to 5 and add new details.
Step 7: Creating a checkout section
HTML:
 
 

 

 

 
Sub-Total

 
2 items

 

 
$6.18

 

 Checkout
 
CSS:
hr{
 width: 66%;
 float: right;
 margin-right: 5%;
}
.checkout{
 float: right;
 margin-right: 5%;
 width: 28%;
}
.total{
 width: 100%;
 display: flex;
 justify-content: space-between;
}
.Subtotal{
 font-size: 22px;
 font-family: ‘Open Sans’;
 font-weight: 700;
 color: #202020;
}
.items{
 font-size: 16px;
 font-family: ‘Open Sans’;
 font-weight: 500;
 color: #909090;
 line-height: 10px;
}
.total-amount{
 font-size: 36px;
 font-family: ‘Open Sans’;
 font-weight: 900;
 color: #202020;
}
.button{
 margin-top: 5px;
 width: 100%;
 height: 40px;
 border: none;
 background: linear-gradient(to bottom right, #B8D7FF, #8EB7EB);
 border-radius: 20px;
 cursor: pointer;
 font-size: 16px;
 font-family: ‘Open Sans’;
 font-weight: 600;
 color: #202020;
}
Preview:
Wrap-up!
GitHub link for the same.
When choosing a shopping cart design, at least remember that people need control,
freedom, and information. This is where users browse your product and actually decide what to buy. It depends on you. A simple solution!
 

How do I add a shopping cart to my HTML website?
Navigate to Store settings → Embed options. Click the Buy Now button in the Choose Embed Type section. Select a product from the drop-down menu. Scroll down and copy the generated code from the Embed shopping cart window (the code will be the same for all products)
How do I create a product cart in HTML?
Allow the user to empty the cart by one click..
 
Step 1: Creating a card. HTML: ... .
 
Step 2: Adding card header. HTML: ... .
 
Step 3: Adding a product details. HTML: ... .
 
Step 4: Creating a counter. HTML: ... .
 
Step 5: Adding a price section. HTML: ... .
 
Step 6: Duplicate cart item. ... .
 
Step 7: Creating a checkout section..
 
How add add to cart button in HTML?
Method 2.
 
In the file etc/config.php , add the line. HTML. Trusted = On. right after the line. ... .
 
Add the following code to the page where you need to insert your 'Add to cart' button: 





programming
html
Cart page



Reply
1
0
 Chia sẻ




 







Bài Viết Liên Quan










Bài tập dẫn luận ngôn ngữ học có đáp án năm 2024



mẹo hay
Khỏe Đẹp
Bài tập
Học Tốt
Học









Hướng dẫn sử dụng hóa đơn điện tử smartvas năm 2024



mẹo hay
Mẹo Hay
Hướng dẫn
HĐĐT









25 ngô văn sở hoàn kiếm hà nội năm 2024



mẹo hay









Làm thế nào để kiếm tiền trên youtube năm 2024



mẹo hay
Hỏi Đáp
Thế nào









Nhuộm hóa tế bào mpo hay sbb nghia la gi năm 2024



mẹo hay
Gfap là gì
Ck20 là gì
Synaptophysin là gì
e-cadherin là gì
Carcinoma là gì









Báo cáo sáng kiến kinh nghiệm môn ngữ văn năm 2024



mẹo hay
Mẹo Hay
Kinh nghiệm
Khoa Học
Sáng kiến









Hoa sử quân tử nở vào mùa nào năm 2024



mẹo hay









Top nhung tua game free choi cung ban be năm 2024



mẹo hay
Top List
Top
Game









Giải sách bài tập tin học lớp 6 năm 2024



mẹo hay
Khỏe Đẹp
Bài tập
Học Tốt
Học
Sách 









Giải bài 35 sgk toán 8 tập 2 số học năm 2024



mẹo hay
Học Tốt
Học













Dề hóa 9 phát triển năng lực học sinh năm 2024



mẹo hay
Học Tốt
Học
VietJack 9









Bài tập sgk 11 goi han liên tục năm 2024



mẹo hay
Khỏe Đẹp
Bài tập
VietJack 11









Ngày nào đi học cũng phải bực wordpress năm 2024



mẹo hay
Học Tốt
Học
Trầm an wordpress
Diễn trò wordpress
Tâm NGỨA wordpress









Đề thi tỉnh phú thọ môn hóa học thcs 2023-2918 năm 2024



mẹo hay
Học Tốt
Học









Chùa 1 cột xây dựng vào năm nào năm 2024



mẹo hay
Xây Đựng
Xây









Bán nhà hẻm 10 nguyễn văn đậu p5 năm 2024



mẹo hay
Xây Đựng
Nhà









Bật tắt các phím chức năng lap top năm 2024



mẹo hay
Top List
Top









Bài tập trắc nghiệm chương 1 toán 12 thư viện năm 2024



mẹo hay
Khỏe Đẹp
Bài tập









Các khoản chi nhà cung cấp không xuất hóa đơn năm 2024



mẹo hay
Xây Đựng
Nhà
thông tư 96/2015/tt-btc









Bài tập chương 4 kế toán tài chính năm 2024



mẹo hay
Khỏe Đẹp
Bài tập