Archived topic
Change cart icon for an image
5 replies · Started by toasterpc on May 24, 2019
Viewing posts 1–6 of 6
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?
Hi there,
What about this?:
.main-navigation a.cart-contents:before,
.secondary-navigation a.cart-contents:before {
content: url( 'URL TO YOUR IMAGE HERE' );
}Great! That worked perfectly.
It seems the icon is a bit misaligned, though I guess I can chalk that up to size.
Ah yea, you'll need to size it manually, as I don't believe it's possible to resize images added as pseudo elements.
Oh well, at least it works now.
Seriously, thanks for everything!
You're welcome :)
This archived topic is closed to new replies.
