[Resolved] Change cart icon for an image

[toasterpc]

Hey there,

So after a while I’ve been trying to find a way to replace the cart icon for an image, with the following code:

add_filter( 'generate_woocommerce_menu_cart_icon', 'tu_change_wc_menu_cart_icon' );
function tu_change_wc_menu_cart_icon() {
    return '<i class="shopping-cart" aria-hidden="true"></i>';
}

and

.shopping-cart {
   line-height: inherit;
   vertical-align: -1px;
   height:15px;
    background-repeat: no-repeat;
    background-image: url(https://mk0collarek79h4xg7og.kinstacdn.com/wp-content/uploads/2019/05/Carrito.svg);
     background-image: url(https://mk0collarek79h4xg7og.kinstacdn.com/wp-content/uploads/2019/05/Carrito.svg)\9;

Though for some reason it ends up overlayed in front of the cart icon and submenu.

Is there a way to change the cart for both the hover and no-hover states of the element?

[Tom]

Hi there,

What about this?:

.main-navigation a.cart-contents:before, 
.secondary-navigation a.cart-contents:before {
    content: url( 'URL TO YOUR IMAGE HERE' );
}

[toasterpc]

Great! That worked perfectly.

It seems the icon is a bit misaligned, though I guess I can chalk that up to size.

[Tom]

Ah yea, you’ll need to size it manually, as I don’t believe it’s possible to resize images added as pseudo elements.

[toasterpc]

Oh well, at least it works now.

Seriously, thanks for everything!

[Tom]

You’re welcome 🙂

[Author]

Posts