[Support request] How to change the Cart icon shape?

[Hana]

Hello, How to change the Cart icon shape?

[David]

Hi there,

in Customizer > Layout > Woocommerce there are several cart icons to choose from.

If you want to add a custom cart icon, this doc explains:

https://docs.generatepress.com/article/generate_svg_icon/

[Hana]

Hi David,
The code in the doc you mentioned is working well, but how to choose the icon shape?
an o”clock shape display after i added it!

[url=https://postimages.org/][img]https://i.postimg.cc/FsppsqHX/cart.jpg[/img][/url]

[David]

You need an SVG image, that you open in a text editor to extract the SVG HTML,
What icon do you want to display? Is it from an icon library or your own icon ?

[Hana]

my own icon

[Leo]

Is it in SVG format? If so you would need to get the HTML code for the SVG as David mentioned.

[Hana]

Hello. I’m trying to add this SVG HTML for this cart icon but it doesn’t display

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<svg version=”1.1″ id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg&#8221; xmlns:xlink=”http://www.w3.org/1999/xlink&#8221; x=”0px” y=”0px”
viewBox=”0 0 512 512″ style=”enable-background:new 0 0 512 512;” xml:space=”preserve”>
<g>
<path d=”M21.6,40.4C9.7,40.4,0,50.1,0,62s9.7,21.6,21.6,21.6h47.8L126,309.9c4.8,19.2,22,32.3,41.8,32.3H415
c19.5,0,36-12.9,41.1-31.7L512,105.1H150.9l10.8,43.1h294.4L415,299.1H167.7L111.2,72.8c-4.8-19.2-22-32.3-41.8-32.3H21.6z
M388,342.2c-35.5,0-64.7,29.2-64.7,64.7s29.2,64.7,64.7,64.7s64.7-29.2,64.7-64.7S423.5,342.2,388,342.2z M194,342.2
c-35.5,0-64.7,29.2-64.7,64.7s29.2,64.7,64.7,64.7s64.7-29.2,64.7-64.7S229.5,342.2,194,342.2z M194,385.3
c12.1,0,21.6,9.4,21.6,21.6s-9.4,21.6-21.6,21.6c-12.1,0-21.6-9.4-21.6-21.6S181.9,385.3,194,385.3z M388,385.3
c12.1,0,21.6,9.4,21.6,21.6s-9.4,21.6-21.6,21.6s-21.6-9.4-21.6-21.6S375.9,385.3,388,385.3z”/>
</g>
</svg>

by this code:

add_filter( ‘generate_svg_icon’, function( $output, $icon ) {
if ( ‘shopping-cart’ === $icon ) {
$svg = ‘<svg xmlns=”http://www.w3.org/2000/svg&#8221; width=”16″ height=”16″ fill=”currentColor” class=”bi bi-alarm-fill” viewBox=”0 0 16 16″>
<path d=”M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z”/>
</svg>’;

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

return $output;
}, 15, 2 );

[Fernando]

Hi Hana,

Can you try this instead?:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'shopping-cart' === $icon ) {
        $svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
	<path d="M21.6,40.4C9.7,40.4,0,50.1,0,62s9.7,21.6,21.6,21.6h47.8L126,309.9c4.8,19.2,22,32.3,41.8,32.3H415
		c19.5,0,36-12.9,41.1-31.7L512,105.1H150.9l10.8,43.1h294.4L415,299.1H167.7L111.2,72.8c-4.8-19.2-22-32.3-41.8-32.3H21.6z
		 M388,342.2c-35.5,0-64.7,29.2-64.7,64.7s29.2,64.7,64.7,64.7s64.7-29.2,64.7-64.7S423.5,342.2,388,342.2z M194,342.2
		c-35.5,0-64.7,29.2-64.7,64.7s29.2,64.7,64.7,64.7s64.7-29.2,64.7-64.7S229.5,342.2,194,342.2z M194,385.3
		c12.1,0,21.6,9.4,21.6,21.6s-9.4,21.6-21.6,21.6c-12.1,0-21.6-9.4-21.6-21.6S181.9,385.3,194,385.3z M388,385.3
		c12.1,0,21.6,9.4,21.6,21.6s-9.4,21.6-21.6,21.6s-21.6-9.4-21.6-21.6S375.9,385.3,388,385.3z"/>
</g>
</svg>';

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

    return $output;
}, 15, 2 );

Tested this from my end and it seems to be working as expected. I’ve also added the SVG html of the one you wish to use.

Kindly let us know how it goes.

[Hana]

It ;s great working my dear, Thank you
now how to move the number of cart items inside the cart icon

[url=https://postimages.org/][img]https://i.postimg.cc/FF0mKht2/cart-items.jpg[/img][/url]

[David]

Thats quite complicated to do.
Can i see the site with the icon in place ?

[Author]

Posts