Change shopping cart icon

Hi everyone!

I asked for the same subject a year ago, but I got nothing to work with.

Now I’m creating another website and I’m confronted with the same problem:

Please click this link, so you got a good context on what exactly I mean

So I’d like to change the cart icon. I use WordPress (obviously ?? ), Woocommerce, Elementor). The theme I created the website off of is one of the plugin “Starter Template (formerly known as “Astra).

1. The “Starter Template” is not accessible in the WordPress Dashboard, neither am I able to contact the developers.
2. I added the cart to the header via the Customizer (which is a great tool). There I could customize a lot about the cart area, but not the cart icon itself. Neither could I change it via Customizer -> WooCommerce.
3. I tried lots of CSS code to change the icon, nothing worked unfortunately.
This is what I’ve tried:

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

(I used a good URL ofc)
Didnt work. also tried another snippet:

.site-header-cart .cart-toggler .cart-contents {
	content: '';
	background: url('https://veniccelove.com/wp-content/uploads/2021/10/shopping_cart-removebg-preview.png') no-repeat center center;
	background-size: contain;
	width: 20px;
	height: 20px;
	margin: -2px -4px;
	display: inline-block;
}

.et-cart-info span:before {
    /* icon made by stephen-hutchings from www.flaticon.com */
    background: url('https://image.flaticon.com/icons/svg/2/2772.svg') !important;
    content: '';
    display: inline-block; 
    height: 1em !important;
    width: 1em !important;
    vertical-align: -1px;
}

Try #3 was this, but also not successful:

.shopping-bag-button:before {
    content: '';
    background: url(<https://veniccelove.com/wp-content/uploads/2021/10/shopping_cart-removebg-preview.png>);

    width: 30px;
    height: 30px;
    display: block;
    background-size: 100%;
    background-repeat: no-repeat;
}

Can somebody help me, please? I have no idea why this is so extremely difficult. To change a mere cart icon shouldn’t take more than 3 seconds, but as it is this takes more like 3 weeks to figure this miniscule detail out… what the hell?!?

Thanks in advance!

• This topic was modified 3 years, 5 months ago by mh1web.
• This topic was modified 3 years, 5 months ago by mh1web.

The page I need help with: [log in to see the link]