Table of Contents
Icon to Custom Icon
/* Cart Drawer Close Icon to Custom Icon */
.custom-cart-drawer-close svg {
visibility: hidden;
}
.ccd-position-right .custom-cart-drawer-close {
background-image: url(https://cdn.pixabay.com/photo/2022/08/06/14/03/leaves-7368692__480.jpg);
background-size: 30px;
background-repeat: no-repeat;
background-position: center center;
}
Icon background color
/* Close icon background */
.ccd-position-right .custom-cart-drawer-close {
background-color: red;
}
Rename text “Shopping Cart”
/* New Shopping Cart Title */
.custom-cart-drawer-container #sqs-cart-container .cart-title {
font-size: 0;
}
.custom-cart-drawer-container #sqs-cart-container .cart-title:before {
font-size: 30px;
content: "New Title";
}
Add a small description under “Shopping Cart”
/* Text under shopping cart title */
.custom-cart-drawer-container #sqs-cart-container .cart-title:after {
content: "enter description here";
display: block;
font-weight: 300;
font-size: 14px;
margin-top: -10px;
}
Shopping Cart custom font
First, you need to declare @font-face
Suppose you declared font-family in @font-face code is Nexa
Then use this CSS
/* Drawer custom font */
.custom-cart-drawer-wrapper .custom-cart-drawer-container * {
font-family: Nexa !important;
}
Add a logo above Shopping Cart text
/* icon above shopping cart */
.custom-cart-drawer-container #sqs-cart-container .cart-title:before {
content: "";
background-image: url(https://cdn.pixabay.com/photo/2022/08/14/08/34/sunflower-7385242__480.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
}
Add a border around Cart Drawer
/* Drawer border */
.custom-cart-drawer-wrapper .custom-cart-drawer-container {
border-left: 2px solid red;
}
.ccd-position-right .custom-cart-drawer-close {
border: 2px solid red;
border-right: 0;
}
Line Color (lines between products, under price)
/* Lines color */
.custom-cart-drawer-wrapper .custom-cart-drawer-container .cart-row {
border-color: red;
}
Line height
/* line height */
.custom-cart-drawer-wrapper .custom-cart-drawer-container .cart-row {
border-width: 5px;
}
Rename text “Price”
/* rename price */
.custom-cart-drawer-container #sqs-cart-container .cart-row-price:before {
content: "Pro:";
}
Remove text “Price”
/* remove price */
.custom-cart-drawer-container #sqs-cart-container .cart-row-price:before {
display: none;
}
Remove quantity
/* remove quantity */
.custom-cart-drawer-container #sqs-cart-container .cart-row-qty {
display: none;
}
Remove Price
/* remove price */
.custom-cart-drawer-container #sqs-cart-container .cart-row-price {
display: none;
}
Rename Checkout button
/* remove checkout */
.custom-cart-drawer-container #sqs-cart-root .cart-checkout {
display: none;
}
Add a text under Checkout button
/* text under checkout */
.custom-cart-drawer-container #sqs-cart-root .cart-checkout:after {
content: "enter text here";
display: block;
font-size: 18px;
}
Remove product image
/* remove product image */
.custom-cart-drawer-container #sqs-cart-container .cart-row-img-wrapper {
display: none;
}