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:
- Allow the users to edit the number of items directly in the cart.
- If cart is empty, provide product recommendations.
- Allow the user to remove the product easily.
- Provide the clear view of the total price of the cart.
- Maintain proper visual hierarchy.
- 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 make a shopping 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 do I make a product catalog in HTML?
How to Make a Product Catalog With HTML. Define a table with a one-pixel border using the opening. tag: ... . Insert the first row of cells and their contents with this code: This is a description of the first item. ... . Insert the second row of cells and their contents with this code: ... . Close the table with the ending tag:.
How do I add a shopping cart icon to my website in HTML?
First make sure you have added Font Awesome Icon library. If this library is added just add the HTML css class fa fa-shopping-cart to any element to add the icon. Font Awesome shopping cart Icon can be resized as per your need. You can manage size of icon[fa fa shopping cart] by using font-size css style.
Chủ Đề