How can I change the Woocommerce shopping cart icon? I am using theme Ellie and their shopping cart icon is confusing, only a circle. So how could I change that?
Any help is much appreciated!
Make it easier without the use of images. Add a pseudo class :before like this:
Remove border:
.site-header-cart .cart-toggler .cart-contents {border:0px;}
then add:
.site-header-cart .cart-toggler .cart-contents:before {
content: "\f07a";
font-family: FontAwesome!important;
}
Add this to your Child theme or go to your Customizer and add it to Extra CSS section
Hope the following code will help : Please check the screenshot
.site-header-cart .cart-toggler .cart-contents:after {
content: "";
font-family: FontAwesome;
margin-left: 14px;
}
.site-header-cart .cart-toggler .cart-contents .count {
line-height: 15px;
text-align: center;
font-size: 12px;
display: block;
width: 100%;
height: 100%;
font-weight: normal;
position: absolute;
You can change the cart icon by CSS by below code in CSS,
.site-header-cart .cart-toggler .cart-contents {
content: '';
background: url('URL_TO_YOUR_CART_IMAGE') no-repeat center center;
background-size: contain;
width: 20px;
height: 20px;
margin: -2px -4px;
display: inline-block;
}
Replace URL_TO_YOUR_CART_IMAGE with the URL to your cart icon.