3

I wanted to change the shopping cart icon in magento 2 and make to change color on mouse hover. I found the block name I dont find how to change the image icon in the block.

thanks in advance

2
  • you want to change minicart icon on the top ? Jul 6, 2017 at 4:12
  • yes! exactly I wanted to replace it with an image that I want and change image on mouse hover
    – learner
    Jul 6, 2017 at 4:16

3 Answers 3

7

In your extended file either _minicart.less or _extend.less

app/design/frontend/vendorname/themename/Magento_Checkout/web/css/source/module/_minicart.less
app/design/frontend/vendorname/themename/Magento_Theme/web/css/source/_extend.less

add below css class and alter you style as per requirements here default css is written and cart icon is coming via Luma Icons with content value "\e611"

you can change them to font-awesome icons or your custom image using background image

.minicart-wrapper .action.showcart::before,
.minicart-wrapper .action.showcart.active::before {
    -webkit-font-smoothing: antialiased;
    font-size: 22px;
    line-height: 28px;
    color: #8f8f8f;
    content: '\e611';
    font-family: 'luma-icons';
    margin: 0;
    vertical-align: top;
    display: inline-block;
    font-weight: normal;
    overflow: hidden;
    speak: none;
    text-align: center;
}
.minicart-wrapper .action.showcart:hover::before{
    color:#333;
}

I hope this will work for you. If you are using font awsome icons on your site then that will better option and color changing will be flawless

Thanks

3
  • this shows after I click the icon.. i wnated show it default
    – learner
    Jul 6, 2017 at 5:11
  • 1
    could you pass the url of site Jul 6, 2017 at 5:12
  • @learner my edit will solve your problem. Nov 20, 2020 at 2:36
0

You just need to create “Magento_Checkout” folder in mentioned path

app/design/frontend///Magento_Checkout.

and add the minicart.phtml file in mentioned path

app/design/frontend///Magento_Checkout/templates/cart

from

“vendor/magento/module-checkout/view/frontend/templates/cart”

with your changes.

0

::First let me clear that you can't edit magento core themes directly from /app/design/magento!!!::

::If you want to change it your self then, you've to create your own one and make changes as required!!::

::Now let's go to the point!::

::first => Create custom.css file at /app/design/vendor/theme/Magento_Theme/web/css/::

::second => create default.xml file at /app/design/vendor/theme/Magento_Theme/layout/::

::Now put the file contents like below::

::CSS::

::

.minicart-wrapper .action.showcart:before{

content:url('../images/minicart.jpg')!important;

zoom:1.5%;} ::

::XML::

//make sure to copy the default structure for xml file.

//I have not pasted that here because i am a noob to stackexchange!!

:::Last Step :::

move your new minicart image to the /app/design/vendor/theme/Magento_Theme/web/images/minicart.img extension

::Finally run below commands::

::Make sure to remove /pub/static/frontend::

::bin/magento setup:upgrade::

::bin/magento setup:di:compile::

::bin/magento setup:static-content:deploy -f::

::bin/magento indexer:reindex::

::bin/magento cache:flush::

::chmod -R 777 ../magento root directory name::

::Thank You::

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.