[Support request] Custom woocommerce cart icon

[Miloš]

Hi guys,

I’m using SVGs for icons. How would I go about inserting a custom icon for woocomerce cart?

I saw this article, but that shows an example when font is being used for icons.

Thanks a lot!

[Elvin]

Hi there,

You can use this PHP snippet to change the icon:

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 );

Simply change the value of $svg within the code to your custom <svg>.

This particular code is if you’re using shopping bag on Appearance > Customize > Layout > WooCommerce for this to work. https://share.getcloudapp.com/NQuJ68yO

If you’re using other icon variants like shopping-cart or shopping-basket, you’ll have to do if ( 'shopping-cart' === $icon ) { ... } or if ( 'shopping-basket' === $icon ) { ... } instead.

[Author]

Posts