[Resolved] Cart menu icon change

Home Forums Support [Resolved] Cart menu icon change

Home Forums Support Cart menu icon change

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1560115
    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é

    #1560559
    David
    Staff
    Customer Support

    Hi there,

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

    #1560567
    Rene Nekuda

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

    #1561303
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1561358
    Rene Nekuda

    Working well – thank you guys!

    #1562099
    Tom
    Lead Developer
    Lead Developer
    #1938366
    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!

    #1938432
    Leo
    Staff
    Customer Support

    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 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.