Woocommerce change shopping cart icon

Question

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!

Cart icon

https://senjacosmetics.com/shop/

Answer 1

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

Answer 2

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;

Answer 3

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.