Change Cart Icon - by brnenvato - on WordPress WooCommerce support

This topic has 10 replies, 2 voices, and was last updated 5 years, 6 months ago ago by Rose Tyler

  • Avatar: brnenvato
    brnenvato
    Participant
    June 4, 2018 at 20:14

    Cart icon:
    1. I tried to change it with another Font Awesome icon – shipping fast – https://fontawesome.com/icons/shipping-fast?style=solid but do not change it, always reload the original one; how to replace it?
    2. would it be possible to change the color of the icon?
    3. OR, is it possible to replace it with an image?

    Thanks a lot and best regards. Bruno

    9 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 5, 2018 at 08:08

    Hello,

    Please, temporarily disable Maintenance mode on your site and we will help you.
    Thanks in advance.

    Regards

    Avatar: brnenvato
    brnenvato
    Participant
    September 3, 2018 at 21:36

    Hello. I would like to replace the shopping cart icon with a personalized image. The site is under construction, we would like to put it online as soon as possible. Would you please send me the reference email to open wordpress users and give you the opportunity to access the site? Thanks a lot. Best regards. Bruno

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 4, 2018 at 07:24

    Hello,

    Here is our email – 8themes@gmail.com

    Regards

    Avatar: brnenvato
    brnenvato
    Participant
    September 4, 2018 at 08:45

    Hello. Here are the accesses. Thanks a lot. Best regards. Bruno

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 4, 2018 at 14:15

    Hello,

    fas fa-shipping-fast are classes of the new version of FontAwesome – 5.0. Royal theme use version 4.7.0, so use classes of 4.7.0 version https://fontawesome.com/v4.7.0/icons/, for example, shopping-bag
    If you want to set own image, try to use this custom css code (Theme Options > Custom css or style.css file of your child theme):

    .header-type-18 .navbar-right .navbar-right .cart-bag {
        background-image: url(your_image_url);
        width: 20px;
        height: 20px;
        margin-right: 5px;
        margin-top: 2px;
    }
    .ico-sum:before, .ico-sum:after {
        display: none;
    }
    .ico-sum {
        background-color: transparent !important;
    }
    

    Regards

    Avatar: brnenvato
    brnenvato
    Participant
    September 4, 2018 at 21:14

    Hello. I entered the Css in Theme Options > Custom css

    /* APE CART */
    .header-type-18 .navbar-right .navbar-right .cart-bag {
    background-image: url(http://www.batikaboutique.it/images/ape-carrello-30×20.png);
    width: 30px;
    height: 20px;
    margin-right: 5px;
    margin-top: 2px;
    }
    .ico-sum:before, .ico-sum:after {
    display: none;
    }
    .ico-sum {
    background-color: transparent !important;
    }

    but nothing changes: the original icon remains and I can not see my image: where am I wrong? Thanks a lot. Best regards. Bruno

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 5, 2018 at 08:05

    Hello,

    Please add this code in your child theme/functions.php file:
    wp_enqueue_style( 'dynamic-css', get_stylesheet_directory_uri() . '/dynamic.css' );
    http://prntscr.com/kqreis after that create an empty dynamic.css file in child theme directory.

    Regards

    Avatar: brnenvato
    brnenvato
    Participant
    September 5, 2018 at 23:31

    Hello. Thanks for the reply. Now is p e r f e c t ^__^
    Thanks a lot!!! Best regards. Bruno

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 6, 2018 at 07:21

    Hello,

    You’re welcome!
    Have a nice day.

    Regards

  • Viewing 10 results - 1 through 10 (of 10 total)

The issue related to '‘Change Cart Icon’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.