[Resolved] Change cart icon for an image

Home Forums Support [Resolved] Change cart icon for an image

Home Forums Support Change cart icon for an image

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #910075
    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?

    #910131
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    What about this?:

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

    Great! That worked perfectly.

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

    #912606
    Tom
    Lead Developer
    Lead Developer

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

    #912609
    toasterpc

    Oh well, at least it works now.

    Seriously, thanks for everything!

    #912620
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.