[Resolved] Cart menu icon change

[Rene Nekuda]

Hello, I am trying to change menu cart icon to this one: https://fontawesome.com/icons/shopping-bag?style=solid

I have put this code to my function file:

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>';
} 

Result was this: https://renenekuda.d.pr/zirNEb

Yes, I have cleared my cache.

When I use this custom CSS:

.wc-menu-item .gp-icon {
    display: none;
}

basket icon was on the right and number on the left with white gap.

Please, can you help me? Thank you very much!

René

[David]

Hi there,

go to Customizer > General and set the Icon Type to SVG.
Make sure that works correctly, then add the PHP snippet.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rene Nekuda]

Done, but still I have twi baskets in the menu… 🙁 Please, check it…

[Tom]

Hi there,

You can replace the standard shopping bag icon like this:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'shopping-bag' === $icon ) {
        $svg = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shopping-bag" class="svg-inline--fa fa-shopping-bag fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M352 160v-32C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128v32H0v272c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V160h-96zm-192-32c0-35.29 28.71-64 64-64s64 28.71 64 64v32H160v-32zm160 120c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zm-192 0c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24z"></path></svg>';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Rene Nekuda]

Working well – thank you guys!

[Tom]

Glad we could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mike]

We just need to copy and paste this code to the functions.php and ensure that the icon type is set to svg in the customizer?

I’m trying to replace the cart icon and tried this and nothing happened. Wondering what I’m doing wrong, thanks!

[Leo]

Do you have the shopping bag selected in the customizer?

Can you open a new topic for your question if this doesn’t help?

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts