Cart
Product
Unit Price
QTY
Subtotal
Cart totals
Subtotal
$179.99
Shipping
Free
HST (0%)
No Tax
Total
$179.99
PHP
<section class="cart">
<div class="wrapper">
<div class="row_f || cart_wrap">
<div class="col_9 || col_md_8 || col_xs_12 || cart_products_wrap">
<div class="cart_header">
<div class="cart_block || cart_product_name">
<h4>Product</h4>
</div>
<div class="cart_block || cart_unit_price">
<h4>Unit Price</h4>
</div>
<div class="cart_block || cart_qty">
<h4>QTY</h4>
</div>
<div class="cart_block || cart_subtotal">
<h4>Subtotal</h4>
</div>
<div class="cart_block || cart_remove"></div>
</div>
<div class="cart_item">
<div class="cart_block || cart_item_desc">
<a href="/ui-product" class="cart_block || img_wrap">
<img src="/img/product1.png" alt="">
</a>
<div class="cart_block || cart_item_heading">
<p><a href="/ui-product">Hayward Aquavac 600 robotic pool cleaner with caddy</a></p>
</div>
</div>
<div class="cart_block || cart_item_price">
<p><span>$1449.00</span></p>
</div>
<div class="cart_block || cart_item_qty">
<div class="value_buttons_wrap">
<div class="value_button decrease" data-direction="0">-</div>
<label for="qty">
<input type="number" pattern="\d*" class="input qty" id="qty" value="1" onkeydown="return event.keyCode !== 69">
</label>
<div class="value_button increase" data-direction="1">+</div>
</div>
</div>
<div class="cart_block || cart_item_subtotal">
<p><span>$1449.00</span></p>
</div>
<div class="cart_block || product_remove">
<?= svg('iconRemove3', '') ?>
</div>
</div>
<div class="cart_item">
<div class="cart_block || cart_item_desc">
<a href="/ui-product" class="cart_block || img_wrap">
<img src="/img/product2.png" alt="">
</a>
<div class="cart_block || cart_item_heading">
<p><a href="/ui-product">Hayward Aquavac 600 robotic pool cleaner</a></p>
</div>
</div>
<div class="cart_block || cart_item_price">
<p><span>$449.00</span></p>
</div>
<div class="cart_block || cart_item_qty">
<div class="value_buttons_wrap">
<div class="value_button decrease" data-direction="0">-</div>
<label for="qty">
<input type="number" pattern="\d*" class="input qty" id="qty" value="1" onkeydown="return event.keyCode !== 69">
</label>
<div class="value_button increase" data-direction="1">+</div>
</div>
</div>
<div class="cart_block || cart_item_subtotal">
<p><span>$449.00</span></p>
</div>
<div class="cart_block || product_remove">
<?= svg('iconRemove3', '') ?>
</div>
</div>
<div class="cart_item">
<div class="cart_block || cart_item_desc">
<a href="/ui-product" class="cart_block || img_wrap">
<img src="/img/product3.png" alt="">
</a>
<div class="cart_block || cart_item_heading">
<p><a href="/ui-product">Hayward Aquavac 600</a></p>
</div>
</div>
<div class="cart_block || cart_item_price">
<p><span>$2449.00</span></p>
</div>
<div class="cart_block || cart_item_qty">
<div class="value_buttons_wrap">
<div class="value_button decrease" data-direction="0">-</div>
<label for="qty">
<input type="number" pattern="\d*" class="input qty" id="qty" value="1" onkeydown="return event.keyCode !== 69">
</label>
<div class="value_button increase" data-direction="1">+</div>
</div>
</div>
<div class="cart_block || cart_item_subtotal">
<p><span>$2449.00</span></p>
</div>
<div class="cart_block || product_remove">
<?= svg('iconRemove3', '') ?>
</div>
</div>
<div class="cart_item">
<div class="cart_block || cart_item_desc">
<a href="/ui-product" class="cart_block || img_wrap">
<img src="/img/product1.png" alt="">
</a>
<div class="cart_block || cart_item_heading">
<p><a href="/ui-product">Hayward Aquavac 600 robotic pool cleaner with caddy</a></p>
</div>
</div>
<div class="cart_block || cart_item_price">
<p><span>$1449.00</span></p>
</div>
<div class="cart_block || cart_item_qty">
<div class="value_buttons_wrap">
<div class="value_button decrease" data-direction="0">-</div>
<label for="qty">
<input type="number" pattern="\d*" class="input qty" id="qty" value="1" onkeydown="return event.keyCode !== 69">
</label>
<div class="value_button increase" data-direction="1">+</div>
</div>
</div>
<div class="cart_block || cart_item_subtotal">
<p><span>$1449.00</span></p>
</div>
<div class="cart_block || product_remove">
<?= svg('iconRemove3', '') ?>
</div>
</div>
<div class="cart_item">
<div class="cart_block || cart_item_desc">
<a href="/ui-product" class="cart_block || img_wrap">
<img src="/img/product2.png" alt="">
</a>
<div class="cart_block || cart_item_heading">
<p><a href="/ui-product">Hayward Aquavac 600 robotic pool cleaner</a></p>
</div>
</div>
<div class="cart_block || cart_item_price">
<p><span>$449.00</span></p>
</div>
<div class="cart_block || cart_item_qty">
<div class="value_buttons_wrap">
<div class="value_button decrease" data-direction="0">-</div>
<label for="qty">
<input type="number" pattern="\d*" class="input qty" id="qty" value="1" onkeydown="return event.keyCode !== 69">
</label>
<div class="value_button increase" data-direction="1">+</div>
</div>
</div>
<div class="cart_block || cart_item_subtotal">
<p><span>$449.00</span></p>
</div>
<div class="cart_block || product_remove">
<?= svg('iconRemove3', '') ?>
</div>
</div>
<div class="cart_item">
<div class="cart_block || cart_item_desc">
<a href="/ui-product" class="cart_block || img_wrap">
<img src="/img/product3.png" alt="">
</a>
<div class="cart_block || cart_item_heading">
<p><a href="/ui-product">Hayward Aquavac 600</a></p>
</div>
</div>
<div class="cart_block || cart_item_price">
<p><span>$2449.00</span></p>
</div>
<div class="cart_block || cart_item_qty">
<div class="value_buttons_wrap">
<div class="value_button decrease" data-direction="0">-</div>
<label for="qty">
<input type="number" pattern="\d*" class="input qty" id="qty" value="1" onkeydown="return event.keyCode !== 69">
</label>
<div class="value_button increase" data-direction="1">+</div>
</div>
</div>
<div class="cart_block || cart_item_subtotal">
<p><span>$2449.00</span></p>
</div>
<div class="cart_block || product_remove">
<?= svg('iconRemove3', '') ?>
</div>
</div>
</div>
<div class="col_3 || col_md_4 || cart_totals_wrap || sticky_block">
<div class="row_f">
<div class="col_12">
<h4>Cart totals</h4>
</div>
<div class="col_6">
<p>Subtotal</p>
</div>
<div class="col_6 || tr">
<p> $<span>179.99</span></p>
</div>
<div class="col_6">
<p>Shipping</p>
</div>
<div class="col_6 || tr">
<p><span>Free</span></p>
</div>
<div class="col_12">
<hr>
</div>
<div class="col_6">
<p>HST (<span>0</span>%)</p>
</div>
<div class="col_6 || tr">
<p><span>No Tax</span></p>
</div>
<div class="col_12">
<hr>
</div>
<div class="col_6 || total_col">
<p>Total</p>
</div>
<div class="col_6 || total_col || total_col_price || tr">
<p>$<span>179.99</span></p>
</div>
<div class="col_12">
<hr>
</div>
<div class="col_12 || tc">
<button type="submit" class="button || btn_icon">
<?= svg('iconExportWhite', '') ?>
<span>Proceed to Checkout</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>CSS
.cart .cart_wrap{-webkit-box-align:start;-webkit-align-items:flex-start;-moz-box-align:start;-ms-flex-align:start;align-items:flex-start}
.cart .cart_block{display:inline-block;vertical-align:middle}
.cart .cart_header{font-size:0;padding:1rem 0;text-align:center;border-bottom:.1rem solid #dbdbdb}
.cart .cart_header h4{font-size:1.6rem;line-height:1.2;font-weight:700;text-transform:uppercase;margin:0;color:#919191}
.cart .cart_product_name{width:45%;text-align:left}
.cart .cart_unit_price{width:15%}
.cart .cart_qty{width:20%}
.cart .cart_subtotal{width:15%}
.cart .cart_remove{width:5%}
.cart .cart_item{font-size:0;text-align:center;padding:1rem 0;border-bottom:.1rem solid #dbdbdb;position:relative}
.cart .cart_item p{font-size:1.4rem;line-height:1.2;margin:0}
.cart .cart_item_desc{width:45%;font-size:0;text-align:left}
.cart .cart_item_desc .img_wrap{margin:0 1.5rem 0 0}
.cart .cart_item_desc .img_wrap img{width:8rem;height:8rem;-o-object-fit:contain;object-fit:contain;font-family:'object-fit: contain;';-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.cart .cart_item_desc .cart_item_heading{width:-webkit-calc(100% - 11.5rem);width:-moz-calc(100% - 11.5rem);width:calc(100% - 11.5rem)}
.cart .cart_item_desc .cart_item_heading a{-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.cart .cart_item_price{width:15%}
.cart .cart_item_qty{width:20%}
.cart .cart_item_qty .value_buttons_wrap .value_button{height:3rem;line-height:3.1rem;font-size:2rem}
.cart .cart_item_qty .value_buttons_wrap .value_button.decrease{line-height:2.9rem}
.cart .cart_item_qty .value_buttons_wrap .input{width:5rem;height:3rem;font-size:1.4rem}
.cart .cart_item_qty .value_buttons_wrap .input::-webkit-input-placeholder{font-size:1.4rem}
.cart .cart_item_qty .value_buttons_wrap .input:-moz-placeholder{font-size:1.4rem}
.cart .cart_item_qty .value_buttons_wrap .input::-moz-placeholder{font-size:1.4rem}
.cart .cart_item_qty .value_buttons_wrap .input:-ms-input-placeholder{font-size:1.4rem}
.cart .cart_item_qty .value_buttons_wrap .input::-ms-input-placeholder{font-size:1.4rem}
.cart .cart_item_qty .value_buttons_wrap .input::placeholder{font-size:1.4rem}
.cart .cart_item_subtotal{width:15%}
.cart .product_remove{width:5%}
.cart .product_remove .icon{width:1.4rem;height:1.4rem;color:#3d3d3d;cursor:pointer;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s}
.cart_totals_wrap{background-color:rgba(239,239,239,0.6);padding:1.2rem 1.5rem 1.5rem;-webkit-border-radius:1.5rem;-moz-border-radius:1.5rem;border-radius:1.5rem}
.cart_totals_wrap h4{font-size:1.6rem;font-weight:700;line-height:1.2;text-align:center;text-transform:uppercase;color:#3d3d3d;margin:0 0 1.5rem}
.cart_totals_wrap p{font-size:1.4rem;line-height:1.2;margin:.5rem 0}
.cart_totals_wrap hr{margin: 1rem 0;width: 100%;}
.cart_totals_wrap .total_col.total_col_price p{color:#066978}
.cart_totals_wrap .total_col p{font-size:1.6rem;font-weight:700}
.cart_totals_wrap .button{margin:.5rem 0 0;text-transform:uppercase}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.cart .cart_item_heading a:hover{color:#066978}
.cart .cart_item_desc .img_wrap img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}
.cart .product_remove .icon:hover{color:#f44336}
}
@media only screen and (max-width: 1200px) {
.cart_totals_wrap .button{min-width:unset;font-size:1.3rem}
}
@media only screen and (max-width: 992px) {
.cart .cart_header h4,.cart .cart_totals_wrap h4{font-size:1.3rem}
.cart .cart_item_desc .img_wrap{margin:0 1rem 0 0}
.cart .cart_item_desc .img_wrap img{width:5rem;height:5rem}
.cart .cart_item_desc .cart_item_heading{width:-webkit-calc(100% - 6rem);width:-moz-calc(100% - 6rem);width:calc(100% - 6rem)}
.cart .cart_item p{font-size:1.2rem}
.cart .cart_item_qty .value_buttons_wrap .input{width:4rem;font-size:1.2rem}
.cart .cart_item_qty .value_buttons_wrap .input::-webkit-input-placeholder{font-size:1.2rem}
.cart .cart_item_qty .value_buttons_wrap .input:-moz-placeholder{font-size:1.2rem}
.cart .cart_item_qty .value_buttons_wrap .input::-moz-placeholder{font-size:1.2rem}
.cart .cart_item_qty .value_buttons_wrap .input:-ms-input-placeholder{font-size:1.2rem}
.cart .cart_item_qty .value_buttons_wrap .input::-ms-input-placeholder{font-size:1.2rem}
.cart .cart_item_qty .value_buttons_wrap .input::placeholder{font-size:1.2rem}
.cart .product_remove .icon{width:1.2rem;height:1.2rem}
.cart_totals_wrap p,.cart_totals_wrap .total_col p{font-size:1.2rem;margin:.2rem 0}
}
@media only screen and (max-width: 767px) {
.cart .cart_header{display:none}
.cart .cart_header h4,.cart .cart_totals_wrap h4{font-size:1.5rem}
.cart .cart_block{vertical-align:top}
.cart .cart_item_desc{width:100%;text-align:left;padding:0 3rem 0 0}
.cart .cart_item_desc .cart_item_heading p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cart .cart_item_price{display:none}
.cart .cart_item_qty{margin-left:6rem;width:9.5rem;margin-top:-1rem;text-align:left}
.cart .cart_item_qty .value_buttons_wrap .input{width:4.2rem}
.cart .cart_item_subtotal{width:-webkit-calc(100% - 15.5rem);width:-moz-calc(100% - 15.5rem);width:calc(100% - 15.5rem);margin-top:-1rem;text-align:right;vertical-align:bottom}
.cart .product_remove{position:absolute;top:1rem;right:0}
.cart .cart_item p{font-size:1.4rem}
.cart_totals_wrap p{font-size:1.4rem}
.cart_totals_wrap .total_col p{font-size:1.5rem}
.cart_totals_wrap .button{font-size:1rem}
}
@media only screen and (max-width: 640px) {
.cart .cart_item:nth-child(2){border-top:.1rem solid #dbdbdb}
.cart_wrap.row_f .cart_totals_wrap{width:25rem;margin:2rem 1.5rem 1.5rem auto}
.cart_totals_wrap .button{font-size:1.4rem}
}SCSS
/* Vars */
$dark: #066978;
.cart {
.cart_wrap {
align-items: flex-start;
}
.cart_block {
display: inline-block;
vertical-align: middle;
}
.cart_header {
font-size: 0;
padding: 1rem 0;
text-align: center;
border-bottom: .1rem solid #dbdbdb;
h4 {
font-size: 1.6rem;
line-height: 1.2;
font-weight: 700;
text-transform: uppercase;
margin: 0;
color: #919191;
}
}
.cart_product_name {
width: 45%;
text-align: left;
}
.cart_unit_price {
width: 15%;
}
.cart_qty {
width: 20%;
}
.cart_subtotal {
width: 15%;
}
.cart_remove {
width: 5%;
}
.cart_item {
font-size: 0;
text-align: center;
padding: 1rem 0;
border-bottom: .1rem solid #dbdbdb;
position: relative;
p {
font-size: 1.4rem;
line-height: 1.2;
margin: 0;
}
}
.cart_item_desc {
width: 45%;
font-size: 0;
text-align: left;
.img_wrap {
margin: 0 1.5rem 0 0;
img {
width: 8rem;
height: 8rem;
object-fit: contain;
font-family: 'object-fit: contain;';
transition: .3s linear;
}
}
.cart_item_heading {
width: calc(100% - 11.5rem);
a {
transition: .3s linear;
}
}
}
.cart_item_price {
width: 15%;
}
.cart_item_qty {
width: 20%;
.value_buttons_wrap {
.value_button {
height: 3rem;
line-height: 3.1rem;
font-size: 2rem;
&.decrease {
line-height: 2.9rem;
}
}
.input {
width: 5rem;
height: 3rem;
font-size: 1.4rem;
&::placeholder {
font-size: 1.4rem;
}
}
}
}
.cart_item_subtotal {
width: 15%;
}
.product_remove {
width: 5%;
.icon {
width: 1.4rem;
height: 1.4rem;
color: #3d3d3d;
cursor: pointer;
transition: .3s;
}
}
}
.cart_totals_wrap {
background-color: rgba(239, 239, 239, 0.6);
padding: 1.2rem 1.5rem 1.5rem;
border-radius: 1.5rem;
h4 {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
color: #3d3d3d;
margin: 0 0 1.5rem;
}
p {
font-size: 1.4rem;
line-height: 1.2;
margin: 0.5rem 0;
}
hr {
margin: 1rem 0;
width: 100%;
}
.total_col {
&.total_col_price {
p {
color: $dark;
}
}
p {
font-size: 1.6rem;
font-weight: 700;
}
}
.button {
margin: 0.5rem 0 0;
text-transform: uppercase;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.cart .cart_item_heading a:hover {color: $dark}
.cart .cart_item_desc .img_wrap img:hover {transform: scale(1.1)}
.cart .product_remove .icon:hover {color: #F44336;}
}
@media only screen and (max-width: 1200px) {
.cart_totals_wrap .button {min-width: unset;font-size: 1.3rem;}
}
@media only screen and (max-width: 992px) {
.cart .cart_header h4, .cart .cart_totals_wrap h4 {font-size: 1.3rem;}
.cart .cart_item_desc .img_wrap {margin: 0 1rem 0 0;}
.cart .cart_item_desc .img_wrap img {width: 5rem;height: 5rem;}
.cart .cart_item_desc .cart_item_heading {width: calc(100% - 6rem);}
.cart .cart_item p {font-size: 1.2rem;}
.cart .cart_item_qty .value_buttons_wrap .input {
width: 4rem;
font-size: 1.2rem;
&::placeholder {
font-size: 1.2rem;
}
}
.cart .product_remove .icon {width: 1.2rem;height: 1.2rem;}
.cart_totals_wrap p, .cart_totals_wrap .total_col p {font-size: 1.2rem;margin: 0.2rem 0;}
}
@media only screen and (max-width: 767px) {
.cart .cart_header {display: none}
.cart .cart_header h4, .cart .cart_totals_wrap h4 {font-size: 1.5rem;}
.cart .cart_block {vertical-align: top;}
.cart .cart_item_desc {width: 100%;text-align: left;padding: 0 3rem 0 0;}
.cart .cart_item_desc .cart_item_heading p{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.cart .cart_item_price {display: none;}
.cart .cart_item_qty {margin-left: 6rem;width: 9.5rem;margin-top: -1rem;text-align: left;}
.cart .cart_item_qty .value_buttons_wrap .input {width: 4.2rem;}
.cart .cart_item_subtotal {width: calc(100% - 15.5rem);margin-top: -1rem;text-align: right;vertical-align: bottom;}
.cart .product_remove {position: absolute;top: 1rem;right: 0;}
.cart .cart_item p {font-size: 1.4rem;}
.cart_totals_wrap p {font-size: 1.4rem;}
.cart_totals_wrap .total_col p {font-size: 1.5rem;}
.cart_totals_wrap .button {font-size: 1rem;}
}
@media only screen and (max-width: 640px) {
.cart .cart_item:nth-child(2) {border-top: .1rem solid #dbdbdb;}
.cart_wrap.row_f .cart_totals_wrap {width: 25rem;margin: 2rem 1.5rem 1.5rem auto;}
.cart_totals_wrap .button {font-size: 1.4rem;}
}