[Support request] Change Cart Icon

Home Forums Support Change Cart Icon

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #926754
    Sam

    Hi I am trying to implement changing the cart icon from this: https://docs.generatepress.com/article/generate_woocommerce_menu_cart_icon/

    However, the snippet generates the new icon but does not remove the original one and so it now shows both. The code I have used is

    add_filter( ‘generate_woocommerce_menu_cart_icon’, ‘tu_change_wc_menu_cart_icon’ );
    function tu_change_wc_menu_cart_icon() {
    return ‘<i class=”fas fa-shopping-bag” aria-hidden=”true”></i>’;
    }

    I added it using the Snippets plugin.

    #926757
    David
    Staff
    Customer Support

    Hi there,

    can you link me to the site so i can take a look?
    You can edit your original topic and use the Site URL field to share the link privately.

    #926760
    Sam

    Hi, really sorry I am still working on a mamp server while. I have requested my staging site be set up, just waiting for it…

    Please see screen shot: https://www.dropbox.com/s/kwjiau2l3gwiada/Screenshot%202019-06-12%20at%2013.17.16.png?dl=0

    thanks
    Sam

    #926767
    David
    Staff
    Customer Support

    It looks as thought that filter no longer applies with the new shopping cart set-up ill pass that on to Tom.

    You can use CSS like this:

    .main-navigation a.cart-contents.shopping-bag:before {
        content: '\f290';
        font-family: 'Font Awesome\ 5 Free';
    }

    May need to double check the .shopping-bag class depending on what icon you have selected in GP and the CSS unicode for the FA icon and the font family

    #926805
    Sam

    Got it, thanks that worked although I had to do the code like this:

    .main-navigation a.cart-contents.shopping-bag:before {
    content: ‘\f290’;
    font-family: ‘FontAwesome’;
    }

    thanks.

    #926810
    David
    Staff
    Customer Support

    Awesome – glad you got it resolved.

    #929662
    Sam

    Hi David, you’ll be pleased to know I have sorted out the staging site : )

    I have just noticed this does not work when on the website home page, do you have any idea why this might be? I am using a custom header for this page, could that have an effect?

    https://dev.supereight.net/

    #929666
    Sam

    If I disable this Element then it displays the new cart icon just fine. Is there some separate CSS for this?

    thanks

    #929997
    David
    Staff
    Customer Support

    Have you tried flushing caches as the correct code is there?

    If not try just targeting: .main-navigation a.cart-contents:before and giving each of the properties !important

    #931926
    Sam

    Hi, below is the code I am using, even with the adding !important it does not fix the cart icon on the home page:

    /**** Change Cart Icon ****/
    .main-navigation a.cart-contents.shopping-bag:before {
        content: '\f290'!important;
        font-family: 'FontAwesome'!important;
    }

    any from your comments;

    /**** Change Cart Icon ****/
    .main-navigation a.cart-contents:before {
        content: '\f290'!important;
        font-family: 'FontAwesome'!important;
    }

    Neither work.

    Any ideas what I am doing wrong?

    #932002
    David
    Staff
    Customer Support

    Can you try the fontawesome family name i provided here

    Best to flush and disable autoptimize when making customizations.

    #932023
    Sam

    Hi David, that code results in a broken icon (with the square). That is why I used the term I did.

    I have flushed Autoptimize and no change.

    #932418
    Leo
    Staff
    Customer Support

    Looks like it’s working? I can see all the icons:
    https://www.screencast.com/t/FiV1q0il

    #932433
    Sam

    Hi Leo, please navigate to any other page and check the cart icon, this is the one set with custom CSS. However, my problem as this for some reason will not work on the home page. The only difference is I have a Header Element on the home page for the transparent nav. Does that make sense?

    #932448
    Leo
    Staff
    Customer Support

    Hmm how are you loading FA?

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.