[Support request] Change Cart Icon

[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.

[David]

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.

[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

[David]

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

[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.

[David]

Awesome – glad you got it resolved.

[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/

[Sam]

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

thanks

[David]

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

[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?

[David]

Can you try the fontawesome family name i provided here

Best to flush and disable autoptimize when making customizations.

[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.

[Leo]

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

[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?

[Leo]

Hmm how are you loading FA?

[Author]

Posts