Section & Variations › Cart

Available Variations
Cart Variation 2 Starter Kit Codes
<!-- include sections/cart  -->
<section class="cart cart-variation-2">
	<div class="container-fluid">
		<div class="section-header">
			<h3 class="section-title">Shopping Cart</h3>
		</div>
		<div class="section-content">
			<div class="cart-items">
				<div class="cart-item-row cart-item-header">
					<strong>Product</strong>
					<div class="col-right">
						<strong class="col-item">Quantity</strong>
						<strong class="col-item cart-item-subtotal">Subtotal</strong>
					</div>
				</div>
				<div class="cart-item-row">
					<div class="cart-item-image">
						<img src="assets/images/fashion-product-list-5.png" class="product-category-bg" />
					</div>
					<div class="cart-item-content">
						<div class="cart-item-content-top">
							<h4>Slim Fit Waffled polo shirt</h4>
							<div class="col-right">
								<div class="col-item">
									<div class="input-group input-qty">
										<span class="input-group-btn">
											<button type="button" class="btn btn-change btn-icon" data-type="minus" data-field="quant[1]"><i class="ic ic-min"></i></button>
										</span>
										<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
										<span class="input-group-btn">
											<button type="button" class="btn btn-change btn-icon" data-type="plus" data-field="quant[1]"><i class="ic ic-plus"></i></button>
										</span>
									</div>
								</div>
								<span class="col-item cart-item-subtotal">$29.00</span>
							</div>
						</div>
						<div class="cart-item-variables">
							<div class="cart-item-variable">
								<strong>Color: </strong>
								<span>Pale Taupe</span>
							</div>
							<div class="cart-item-variable">
								<strong>Size: </strong>
								<span>XL</span>
							</div>
						</div>
						<a href="#remove" class="cart-item-remove">Remove Item</a>
					</div>
				</div>
				<div class="cart-item-row">
					<div class="cart-item-image">
						<img src="assets/images/fashion-product-list-snippet-4.png" class="product-category-bg" />
					</div>
					<div class="cart-item-content">
						<div class="cart-item-content-top">
							<h4>Man in Green Zip Up Jacket</h4>
							<div class="col-right">
								<div class="col-item">
									<div class="input-group input-qty">
										<span class="input-group-btn">
											<button type="button" class="btn btn-change btn-icon" data-type="minus" data-field="quant[1]"><i class="ic ic-min"></i></button>
										</span>
										<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
										<span class="input-group-btn">
											<button type="button" class="btn btn-change btn-icon" data-type="plus" data-field="quant[1]"><i class="ic ic-plus"></i></button>
										</span>
									</div>
								</div>
								<span class="col-item cart-item-subtotal">$29.00</span>
							</div>
						</div>
						<div class="cart-item-variables">
							<div class="cart-item-variable">
								<strong>Color: </strong>
								<span>Olive Green</span>
							</div>
							<div class="cart-item-variable">
								<strong>Size: </strong>
								<span>XL</span>
							</div>
						</div>
						<a href="#remove" class="cart-item-remove">Remove Item</a>
					</div>
				</div>
			</div>
			<div class="cart-summary">
				<div class="cart-summary-header">
					<h4>Summary</h4>
				</div>
				<div class="cart-summary-content">
					<div class="accordion">
						<div class="accordion-item">
							<h2 class="accordion-header">
								<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#summary-content-shipping-tax" aria-expanded="true" aria-controls="summary-content-shipping-tax"> Estimate shipping and tax </button>
							</h2>
							<div id="summary-content-shipping-tax" class="accordion-collapse collapse show">
								<div class="accordion-body">
									<div class="cart-summary-item ">
										<strong>Subtotal</strong>
										<span>$29.00</span>
									</div>
									<div class="cart-summary-item ">
										<strong>Shipping (Shipping - Standard)</strong>
										<span>$0.00</span>
									</div>
									<div class="cart-summary-item ">
										<strong>Order total</strong>
										<span>$29.00</span>
									</div>
								</div>
							</div>
						</div>
						<div class="accordion-item">
							<h2 class="accordion-header">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#summary-content-voucher" aria-expanded="false" aria-controls="summary-content-voucher"> Apply discount code </button>
							</h2>
							<div id="summary-content-voucher" class="accordion-collapse collapse">
								<div class="accordion-body">
									<form class="form-checkout-voucher">
										<div class="input-group input-group-lg">
											<input type="text" class="form-control" placeholder="Promotional code">
											<button class="btn btn-dark-1" type="button">Apply</button>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="cart-summary-footer">
					<a class="btn btn-icon btn-xl btn-brand-primary" href="checkout.html">PROCEED TO CHECKOUT</a>
					<p>Vendora always attaches importance to the security of your transactions. All transactions via Vendora.com are guaranteed to be 100% safe.</p>
				</div>
			</div>
		</div>
	</div>
</section>
Cart Variation 3 Starter Kit Codes
<!-- include sections/cart  -->
<section class="cart cart-variation-3">
	<div class="container">
		<div class="section-header">
			<ul class="nav nav-tabs nav-cart-steps">
				<li class="nav-item">
					<a class="nav-link active" aria-current="page" href="#">
						<span class="no">1</span>
						<strong>Shopping bag</strong>
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">
						<span class="no">2</span>
						<strong>Shipping</strong>
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">
						<span class="no">3</span>
						<strong>Payment</strong>
					</a>
				</li>
			</ul>
		</div>
		<div class="section-content">
			<div class="cart-items">
				<h3 class="section-title">Shopping bag (2)</h3>
				<div class="cart-item-row">
					<div class="cart-item-image">
						<img src="assets/images/cosmetics-product-details-2.png" class="product-category-bg" />
					</div>
					<div class="cart-item-content">
						<div class="cart-item-content-top">
							<strong class="product-category">Skincare</strong>
							<h4>Virena Smoothing Starter Set</h4>
							<div class="col-right">
								<div class="col-item">
									<div class="form-group input-qty">
										<label>QTY</label>
										<select class="form-control">
											<option>1</option>
											<option>2</option>
											<option>3</option>
										</select>
									</div>
								</div>
								<span class="col-item cart-item-subtotal">$320.00</span>
							</div>
						</div>
						<a href="#remove" class="cart-item-remove">Remove Item</a>
					</div>
				</div>
				<div class="cart-item-row">
					<div class="cart-item-image">
						<img src="assets/images/cosmetics-product-list-9.png" class="product-category-bg" />
					</div>
					<div class="cart-item-content">
						<div class="cart-item-content-top">
							<strong class="product-category">Skincare</strong>
							<h4>Advanced Super Revitalizing Cream</h4>
							<div class="col-right">
								<div class="col-item">
									<div class="form-group input-qty">
										<label>QTY</label>
										<select class="form-control">
											<option>1</option>
											<option>2</option>
											<option>3</option>
										</select>
									</div>
								</div>
								<span class="col-item cart-item-subtotal">$18.00</span>
							</div>
						</div>
						<a href="#remove" class="cart-item-remove">Remove Item</a>
					</div>
				</div>
			</div>
			<div class="cart-summary">
				<div class="cart-summary-header">
					<h4>Summary</h4>
				</div>
				<div class="cart-summary-content">
					<div class="cart-summary-item ">
						<strong>Subtotal</strong>
						<span>$50.00</span>
					</div>
					<div class="cart-summary-item ">
						<strong>Shipping (Shipping - Standard)</strong>
						<span>TBD</span>
					</div>
					<div class="cart-summary-item ">
						<strong>Tax</strong>
						<span>$TBD</span>
					</div>
					<div class="cart-summary-item strong">
						<strong>Estimated Total</strong>
						<span>$50.00</span>
					</div>
					<form class="form-checkout-voucher">
						<div class="input-group input-group-lg">
							<input type="text" class="form-control" placeholder="Promotional code">
							<button class="btn btn-dark-1" type="button">Apply</button>
						</div>
					</form>
				</div>
				<div class="cart-summary-footer">
					<a class="btn btn-icon btn-xl btn-brand-primary" href="checkout.html"><i class="ic ic-lock white"></i> PROCEED TO CHECKOUT</a>
					<p>Need help with your order? <a href="#">Chat Now</a></p>
				</div>
			</div>
		</div>
	</div>
</section>