Shopping Cart Template Using Html and Css

Shopping Cart Template Using Html and Css

How To Create Shopping Cart Template Using Html and Css

Hello and welcome to Codewithrandom. Today we will see How to Create Shopping cart Template Using Html And Css. So creating  a Shopping Cart Templates by Html and Css is not easy even not hard but , i am here to tech You How to build  shopping cart template bootstrap with in single page so. Lets start and you have to follow All important keypoints which is provided Below.

100 Day , 100 HTML CSS JavaScript Projects

Shopping Cart Template Using Html and css
Shopping Cart Template Using Html and css

 

I am sharing live preview of this shopping cart template using Html and CSS you can see live demo of full project which is created in this article i am sharing some other Shopping cart Template  Using Html css code Link also.  You can Consider this article also

Shopping Cart Template Html Code:-

This shopping card template contains <main>tag as the main wraper tag inside the main tag. We have nav tag which contains our shopping template navbar which is used for filter, and The template is built using the popular front-end framework. Bootstrap, which utilizes HTML, CSS, and JavaScript. Bootstrap provides a solid foundation for the template, making it easy to create a mobile-friendly and responsive design.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
           <a class="navbar-brand" href="#"><strong>Shopping Cart</strong></a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
           </button>
  
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
              </ul>
              <form class="form-inline my-2 my-lg-0">
                 <input class="form-control mr-sm-2" type="search" id="search_field"  placeholder="Search" aria-label="Search">
              </form>
              <button type="button" class="btn btn-success my-2 my-sm-0" data-toggle="modal"
                 data-target="#staticBackdrop">
                  <i class="fas fa-shopping-cart total-count"></i>
              </button>
           </div>
        </nav>
        <section>
           <div class="featured-area pt-100 pb-70">
              <div class="container">
                 <div class="tab featured-tab-area">
                    <div class="row justify-content-center">
  
                       <div class="col-lg-4 col-md-8">
                          <ul class="tabs active">
                             <li class="">
                                <a href="#">
                                   All
                                </a>
                             </li>
                             <li class="">
                                <a href="#">
                                   Men
                                </a>
                             </li>
                             <li class="">
                                <a href="#">
                                   Women
                                </a>
                             </li>
                             <li class="">
                                <a href="#">
                                   Watch
                                </a>
                             </li>
                          </ul>
                       </div>
                    </div>
                    <div class="tab_content current active pt-45">
                       
                       <div class="tabs_item current">
                          <div class="row justify-content-center">
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/men-1.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Oxford Shirts</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>Rs. 1200 </h4>
                                         <span>(4.9)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Oxford" data-price="1200" class="default-btn border-radius-5"> Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/women-1.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Tunic </a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 459 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Tunic" data-price="459" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/watch-1.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Huawei Watch Buds	</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 4059 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Huawei" data-price="4059" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/men-2.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Short-Sleeve Shirt</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 800 </h4>
                                         <span>(4.9)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Short-Sleeve" data-price="800" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/women-2.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Culotte dress</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 2459 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Culotte" data-price="2459" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/watch-2.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Fire Boltt Dazzle </a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 1999 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="FireBoltt" data-price="1999" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/men-3.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Cuban Collar Shirt</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 499 </h4>
                                         <span>(4.9)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="CubanCollar" data-price="499" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/women-3.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Babydoll</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 1159 </h4>
                                         <span>(4.0)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Babydoll" data-price="1159" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/watch-3.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Google Pixel</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 2059 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Google" data-price="2059" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/men-4.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">T-shirt</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 700 </h4>
                                         <span>(3.9)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="T-shirt" data-price="700" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/women-4.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Wrap around</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 4059 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Wrap" data-price="4059" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/watch-4.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">titan Power</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 459 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="titan" data-price="459" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </div>
                       </div>
                       <div class="tabs_item">
                          <div class="row justify-content-center">
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/men-1.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Oxford Shirts</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 1200 </h4>
                                         <span>(4.9)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Oxford" data-price="1200" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/men-2.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Short-Sleeve Shirt</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 800 </h4>
                                         <span>(4.9)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Short-Sleeve" data-price="800" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/men-3.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Cuban Collar Shirt</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 499 </h4>
                                         <span>(4.9)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Cuban" data-price="499" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/men-4.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">T-shirt</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 700 </h4>
                                         <span>(3.9)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="T-shirt" data-price="700" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </div>
                       </div>
                       <div class="tabs_item">
                          <div class="row justify-content-center">
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/women-1.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Tunic </a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 459 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Tunic" data-price="459" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/women-2.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Culotte dress</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 2459 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Culotte" data-price="2459" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/women-3.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Babydoll</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 1159 </h4>
                                         <span>(4.0)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Babydoll" data-price="1159" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/women-4.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Wrap around</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 4059 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Wrap" data-price="4059" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </div>
                       </div>
                       <div class="tabs_item">
                          <div class="row justify-content-center">
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/watch-1.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Huawei Watch Buds	</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 4059 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Huawei" data-price="4059" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/watch-2.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Fire Boltt Dazzle </a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 1999 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="FireBoltt" data-price="1999" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/watch-3.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">Google Pixel</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 2059 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="Google" data-price="2059" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                             <div class="col-lg-3 col-md-6">
                                <div class="featured-item">
                                   <div class="featured-item-img">
                                      <a href="#">
                                         <img src="https://add-to-cart-javascript.vercel.app/img/watch-4.jpg" alt="Images">
                                      </a>
                                   </div>
                                   <div class="content">
                                      <h3><a href="#">titan Power</a></h3>
                                      <hr>
                                      <div class="content-in">
                                         <h4>₹ 459 </h4>
                                         <span>(4.4)<i class="fa fa-star"></i></span>
                                      </div>
                                      <hr>
                                      <div class="featured-content-list">
                                         <button type="button" data-name="titan" data-price="459" class="default-btn border-radius-5">Add to cart</button>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </div>
                       </div>
  
                       <p id="not_found"></p>
                    </div>
                 </div>
              </div>
           </div>
        </section>
  
  
        <!-- Modal -->
        <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
           aria-labelledby="staticBackdropLabel" aria-hidden="true">
           <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                 <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Your Cart</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                       <span aria-hidden="true">&times;</span>
                    </button>
                 </div>
                 <div class="modal-body">
                    <table class="show-cart table">
          
                    </table>
                    <div class="grand-total">Total price: ₹<span class="total-cart"></span></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <!-- <button type="button" class="btn btn-danger clear-all">Clear All</button> -->
                  </div>
              </div>
           </div>
        </div>
     </main>
</body>
</html>

We added filter option with a proper working functionality which is used to filter the Shopping template  item according to your selected filter , also also used button for each product which is working fine for adding product to cart , and when we talk about product section there we used a price section which display price of product.

Create Portfolio Website Using HTML and CSS (Source Code)

Shopping Cart CSS code

here i am sharing the css for this Shopping card template this css file includes the responsive design with button style , product alignment , font size and color management and much more thing , you can link css by two ways i prefer internal css here if you want to use external css you have to add <link rel="stylesheet" href="filepath.css"> so here i am sharing yiu the css you can follow the given code for same style.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

:root {
  --bodyFonts: 'Josefin Sans', sans-serif;
  --pinkColor: #5557F3;
  --titleColor: #000000;
  --bodyColor: #666666;
  --lightblueColor: #8D99FF;
  --whiteColor: #ffffff;
  --fontSize: 16px;
  --transition: .5s;
}
body {
  padding: 0;
  margin: 0;
  font-family: 'Noto Sans', sans-serif !important;
}
a,
a:hover {
  text-decoration: none !important;
}
img {
  max-width: 100%;
}
hr {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.pt-100 { padding-top: 100px; }
.pt-45 { padding-top: 45px; }
#not_found {
  text-align: center;
  color: red;
}
.grand-total {
  margin-top: 1rem;
  text-align: center;
  font-weight: 600;
}
.table {
  margin-bottom: 0 !important;
}
.default-btn {
  padding: 12px 25px 10px;
  text-align: center;
  color: var(--whiteColor) !important;
  font-size: var(--fontSize);
  transition: var(--transition);
  display: inline-block;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 8px;
  z-index: 0;
  background: var(--pinkColor);
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}
.default-btn:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 550px;
  height: 550px;
  margin: auto;
  background: var(--lightblueColor);
  border-radius: 8px;
  z-index: -1;
  transform-origin: top center;
  transform: translateX(-50%) translateY(-5%) scale(0.4);
  transition: transform .9s;
}
.default-btn:hover {
  color: var(--whiteColor) !important;
}
.default-btn:hover:before {
  transition: transform 1s;
  transform: translateX(-45%) translateY(0) scale(1);
  transform-origin: bottom center;
}
.btn-success {
  background-color: #F96B6A !important;
  border-color: #F96B6A !important;
}
.featured-area {
  background-color: #EDEFF9;
}
.featured-tab-area .tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  float: right;
}
.featured-tab-area .tabs li {
  display: inline-block;
  line-height: initial;
  margin-right: 20px;
}
.featured-tab-area .tabs li a {
  display: inline-block;
  position: relative;
  color: var(--titleColor);
  padding: 13px 26px 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.featured-tab-area .tabs li.active a {
  background-color: var(--pinkColor);
  color: var(--whiteColor);
}
.featured-tab-area .tabs li.current a {
  background-color: var(--pinkColor);
  color: var(--whiteColor);
}
.featured-tab-area-ml .tabs {
  margin-top: 0 !important;
  float: left;
}
.tab .tabs_item {
  display: none;
}
.tab .tabs_item:first-child {
  display: block;
}
.featured-item {
  margin-bottom: 30px;
  background-color: var(--whiteColor);
  border-radius: 5px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.featured-item .featured-item-img {
  position: relative;
  z-index: 1;
  transition: 0.3s linear;
  overflow: hidden;
}
.featured-item .featured-item-img a {
  display: block;
}
.featured-item .featured-item-img a img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border: 4px solid var(--whiteColor);
  transition: 0.3s linear;
}

.featured-item .featured-item-img a img:hover {
  scale: 1.08;
} 

.featured-item .content {
  padding: 20px 15px;
}
.featured-item .content h3 {
  margin-bottom: 10px;
}
.featured-item .content h3 a {
  color: var(--titleColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  font-weight: bold;
}
.featured-item .content .content-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px;
  border-radius: 3px;
}
.featured-item .content .content-in i {
  color: #ffcc00;
}
.featured-item .content .content-in span {
  font-size: 15px;
  color: var(--titleColor);
  font-weight: 500;
}
.featured-item .content .content-in h4 {
  font-size: 15px;
  color: var(--titleColor);
  font-weight: 500;
  margin-bottom: 0;
}
.featured-item .content .featured-content-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0 0;
}
.featured-tab-area .tabs li {
  margin-right: 5px;
}
#staticBackdropLabel {
  font-weight: bold;
}
/* responsive css */
@media only screen and (max-width: 767px) {
  .featured-tab-area .tabs {
    margin: 20px 0 0;
    float: none;
    text-align: left;
  }
  .featured-tab-area .tabs li:last-child {
    margin-right: 5px;
  }
  .featured-tab-area .tabs li a {
    font-size: 14px;
    padding: 12px 16px 9px;
  }
  .featured-item .content {
    padding: 20px 10px;
  }
  .featured-item .content h3 {
    font-size: 19px;
  }
  .featured-item .content .content-in span {
    font-size: 14px;
  }
  .featured-item .content .content-in h4 {
    font-size: 14px;
  }
  .featured-item .content .featured-content-list {
    padding: 12px 0 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .featured-item .content {
    padding: 20px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .featured-tab-area .tabs li a {
    font-size: 14px;
    padding: 12px 16px 9px;
  }
  .featured-item .featured-item-img .featured-user {
    top: 20px;
  }
  .featured-item .featured-item-img .featured-user .featured-user-option img {
    margin-right: 7px;
    width: 25px !important;
    height: 25px !important;
  }
  .featured-item .featured-item-img .featured-user .featured-user-option span {
    font-size: 13px;
    padding-top: 2px;
  }
  .featured-item .featured-item-img .featured-item-clock {
    font-size: 18px;
  }
  .featured-item .content {
    padding: 20px 10px;
  }
  .featured-item .content h3 {
    font-size: 19px;
  }
  .featured-item .content .content-in span {
    font-size: 14px;
  }
  .featured-item .content .content-in h4 {
    font-size: 14px;
  }
  .featured-item .content .featured-content-list {
    padding: 12px 0 0;
  }
  .featured-item .content .featured-content-list p {
    font-size: 14px;
  }
  .featured-item .content .featured-content-list p i {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .featured-tab-area .tabs li {
    margin-right: 5px;
  }
  .featured-tab-area .tabs li a {
    font-size: 14px;
    padding: 12px 16px 9px;
  }
  .featured-item .content h3 {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1299px) {
  .featured-tab-area .tabs li a {
    font-size: 14px;
    padding: 12px 16px 9px;
  }
  .featured-item .content {
    padding: 20px 20px;
  }
  .featured-item .content .content-in {
    padding: 10px 5px 8px;
  }
  .featured-item .content h3 {
    font-size: 18px;
  }
}

JavaScript Code:-

Here i am providing you some javscript code which add proper working add to cart button functionality and some additional feture like responsive and shoring cart item to localstorage which help you in prevent lose your added to cart items , so here is some javascript code.

var shoppingCart = (function () {

    cart = [];

    function Item(name, price, count) {
      this.name = name;
      this.price = price;
      this.count = count;
    }

    // Save cart
    function saveCart() {
      localStorage.setItem('shoppingCart', JSON.stringify(cart));
    }

    // Load cart
    function loadCart() {
      cart = JSON.parse(localStorage.getItem('shoppingCart'));
    }
    if (localStorage.getItem("shoppingCart") != null) {
      loadCart();
    }


    var obj = {};

    // Add to cart
    obj.addItemToCart = function (name, price, count) {
      for (var item in cart) {
        if (cart[item].name === name) {
          cart[item].count++;
          saveCart();
          return;
        }
      }
      var item = new Item(name, price, count);
      cart.push(item);
      saveCart();
    }
    // Set count from item
    obj.setCountForItem = function (name, count) {
      for (var i in cart) {
        if (cart[i].name === name) {
          cart[i].count = count;
          break;
        }
      }
    };
    // Remove item from cart
    obj.removeItemFromCart = function (name) {
      for (var item in cart) {
        if (cart[item].name === name) {
          cart[item].count--;
          if (cart[item].count === 0) {
            cart.splice(item, 1);
          }
          break;
        }
      }
      saveCart();
    }

    // Remove all items from cart
    obj.removeItemFromCartAll = function (name) {
      for (var item in cart) {
        if (cart[item].name === name) {
          cart.splice(item, 1);
          break;
        }
      }
      saveCart();
    }

    // Clear cart
    obj.clearCart = function () {
      cart = [];
      saveCart();
    }

    // Count cart 
    obj.totalCount = function () {
      var totalCount = 0;
      for (var item in cart) {
        totalCount += cart[item].count;
      }
      return totalCount;
    }

    // Total cart
    obj.totalCart = function () {
      var totalCart = 0;
      for (var item in cart) {
        totalCart += cart[item].price * cart[item].count;
      }
      return Number(totalCart.toFixed(2));
    }

    // List cart
    obj.listCart = function () {
      var cartCopy = [];
      for (i in cart) {
        item = cart[i];
        itemCopy = {};
        for (p in item) {
          itemCopy[p] = item[p];
        }
        itemCopy.total = Number(item.price * item.count).toFixed(2);
        cartCopy.push(itemCopy)
      }
      return cartCopy;
    }
    return obj;
  })();


  // Add item
  $('.default-btn').click(function (event) {
    // alert('working');
    event.preventDefault();
    var name = $(this).data('name');
    var price = Number($(this).data('price'));
    shoppingCart.addItemToCart(name, price, 1);
    displayCart();
  });

  // Clear items
  $('.clear-cart').click(function () {
    shoppingCart.clearCart();
    displayCart();
  });


  function displayCart() {
    var cartArray = shoppingCart.listCart();
    var output = "";
    for (var i in cartArray) {
      output += "<tr>"
        + "<td>" + cartArray[i].name + "</td>"
        + "<td>(" + cartArray[i].price + ")</td>"
        + "<td><div class='input-group'>"
        + "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>"
        + "</div></td>"
        + "<td><button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">X</button></td>"
        + " = "
        + "<td>" + cartArray[i].total + "</td>"
        + "</tr>";
    }
    $('.show-cart').html(output);
    $('.total-cart').html(shoppingCart.totalCart());
    $('.total-count').html(shoppingCart.totalCount());
  }

  // Delete item button

  $('.show-cart').on("click", ".delete-item", function (event) {
    var name = $(this).data('name')
    shoppingCart.removeItemFromCartAll(name);
    displayCart();
  })

  // Item count input
  $('.show-cart').on("change", ".item-count", function (event) {
    var name = $(this).data('name');
    var count = Number($(this).val());
    shoppingCart.setCountForItem(name, count);
    displayCart();
  });
  displayCart();

//////// ui script start /////////
// Tabs Single Page
$('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
$('.tab ul.tabs li a').on('click', function (g) {
    var tab = $(this).closest('.tab'), 
    index = $(this).closest('li').index();
    tab.find('ul.tabs > li').removeClass('current');
    $(this).closest('li').addClass('current');
    tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
    tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
    g.preventDefault();
});

// search function
$('#search_field').on('keyup', function() {
  var value = $(this).val();
  var patt = new RegExp(value, "i");

  $('.tab_content').find('.col-lg-3').each(function() {
    var $table = $(this);
    
    if (!($table.find('.featured-item').text().search(patt) >= 0)) {
      $table.not('.featured-item').hide();
    }
    if (($table.find('.col-lg-3').text().search(patt) >= 0)) {
      $(this).show();
      document.getElementById('not_found').style.display = 'none';
    } else {
      document.getElementById("not_found").innerHTML = " Product not found..";
      document.getElementById('not_found').style.display = 'block';
    }
    
  });
  
});

Conclusion

Creating a Shopping Cart Template with HTML and CSS doesn’t have to be complex. By following these steps and customizing the styles to match your brand, you can build a visually appealing and functional shopping cart for your e-commerce website. Happy coding!

Is this Shopping cart template include add to cart button ?

yes, This Shopping cart template include add to cart button

Is this Shopping cart template mobile friendly ?

yes, This Shopping Cart Template is fully responsive



Leave a Reply