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; }