ResolvedChange cart icon

This topic contains 9 replies, has 2 voices, and was last updated by  Codrin1 3 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #19151

    Codrin1
    Participant

    Hello,

    Could you please tell me how can I change the cart icon both from the main menu and mini-cart? I would like to use a font awesome icon with a shopping cart instead.

    Many thanks,

    #19174

    Codrin1
    Participant

    Hi all, any updates on how to change the cart icon please? Thanks

    #19188

    Althemist
    Keymaster

    Hi Codrin1,

    Sorry for the delayed response. A relative passed away recently and I was forced to permanently move to another city, so support was left to minimum for the last few weeks. We are now back in full capacity.

    The only way to change the cart icon in the header and product listings would be with custom CSS. You’d need to overwrite the existing theme CSS rules and replace with your own. It’s an icon font (FontAwesome) assigned as a content of a pseudo-class (::before).

    Hope this helps.

    Regards,
    Dimitar

    #19200

    Codrin1
    Participant

    Hi Dimitar, I’m sorry to hear that

    Would it be possible for you to be more precise and tell me the exact custom code I need to add and where to be able to change the icon please?

    Appreciate your help!

    Thanks,

    #19211

    Althemist
    Keymaster

    It’s this code and you’d need to change the unicode of the icon in the content property:

    #cart-module a.cart-contents::before {
        content: "\f07a !important";
    }

    You can add the code in Appearance > Customize > Additional CSS

    Hope this helps.

    Regards,
    Dimitar

    #19215

    Codrin1
    Participant

    Hi Dimitar, that’s great thank you! Kindly share how to change the icon from mini-cart also?

    Best,

    #19216

    Codrin1
    Participant

    Hey, I’ve managed to change it myself. thanks for the help!

    #19219

    Codrin1
    Participant

    Sorry, I’ve just realised that the icon shows up when you hover over a product also. I found the code below but it doesn’t change the icon, only the size of the current one. I’ve tried different variations of the code but didn’t manage to change it. Could you please provide custom code to change it there also?

    .prod_hold.type-product a.add_to_cart_button::before {
    content: “\f07a” !important;
    font-size: 17px !important;
    }

    Thanks a lot!

    #19229

    Althemist
    Keymaster

    It must be

    div.prod_hold .links a.button.add_to_cart_button:before {
    content: “\f07a” !important;
    }

    Regards,
    Dimitar

    #19243

    Codrin1
    Participant

    Thanks a lot Dimitar!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in and have valid license to reply to this topic.

License required for any item belonging to this account
AlThemist

AlThemist

sales 12493, followers 691
Login and Registration Log in · Register