[Resolved] WooCommerce change cart icon

[Jamal]

Hi

Is there any way to change cart icon to fa-shopping-basket ?

[Leo]

Hi Jamal,

I could be wrong about this but I think you can simply add a custom link with the cart page as the URL and preferable icon as the navigation label.

Just tried it I didn’t see anything wrong with that.

Perhaps Tom would have a cooler way 🙂

[Tom]

Right now you would have to overwrite the icon:

.cart-contents .fa-shopping-cart:before {
    content: "\f291";
}

I’ll be sure to add a filter here so it’s easier in the future.

[Jamal]

Perfect, works as intended. Thanks guys !

[Tom]

No problem 🙂

[Jamal]

This is no longer working after updating to GP 1.4. How can i apply the filter generate_woocommerce_menu_cart_icon ? Returning my new icon doesn’t do the trick. Thanks in advance

[Tom]

This should help: https://docs.generatepress.com/article/generate_woocommerce_menu_cart_icon/

Let me know 🙂

[Jamal]

Doesn’t seem to work unfortunately. It removes old icon but doesn’t replace it with fa-shopping-basket

[Tom]

So you’ve done this?:

add_filter( 'generate_woocommerce_menu_cart_icon', 'tu_change_wc_menu_cart_icon' );
function tu_change_wc_menu_cart_icon() {
    return '<i class="fa fa-shopping-basket" aria-hidden="true"></i>';
}

[Jamal]

Yes Tom i have done exactly that. This is a screenshot from the frontend [ Screenshot removed ]

[Tom]

Ah, so the filter is working, but the icon isn’t.

Are you using the Font Awesome essentials filter by chance?

[Jamal]

No i checked that first thing. As usual, it must be something im doing wrong but can’t figure out what. After updating theme, this method was no longer working as well https://generatepress.com/forums/topic/woocommerce-change-cart-icon/#post-338528

[Tom]

Hmm, can you link me to the site?

[Jamal]

Link removed

[Tom]

You’re using a plugin that is taking over the Font Awesome file: https://fungi.cannysolutions.se/wp-content/plugins/load-more-products-for-woocommerce/css/font-awesome.min.css

It’s essential for developers who are enqueuing Font Awesome to add the version number, this way WordPress will use the latest version.

It seems this developer hasn’t added a version number, so it uses the WP version (4.8).

The current version of FA is 4.7, so WP is loading their stylesheet, even though they’re truly using FA 4.3 (which likely doesn’t have that icon in it).

[Author]

Posts