Replace shopping cart icon

[gmasso]

Hi! I want to replace the default icon that comes with the shopping cart module in the classic theme with an icon of my own. My guess is that I should modify something in the ps_shoppingcart.tpl file, but I don't really understand how images work in .tpl files. I attach a screenshot of the icon I want to replace and another with the line of code where I guess the icon is being set.

[Knowband Plugins]

These are the CSS Icons. 
You can either directly replace highlighted HTML with the img src tag & add own img link in the src tag.

Using the highlighted method, You can only use the icons which are predefined. Your theme is using the material icons. The list of material icons can be found on the URL below.
https://material.io/resources/icons/?style=baseline

You need to replace the "shopping-cart" (As you mentioned on the highlighted section), with the text defined in the above URL for icons.

Like replace "shopping-cart" with "shopping_bag" to replace the icons as shown in the screenshot below.
https://prnt.sc/tmdooi

[gmasso]

2 hours ago, Knowband Plugins said:

These are the CSS Icons. 
You can either directly replace highlighted HTML with the img src tag & add own img link in the src tag.

Using the highlighted method, You can only use the icons which are predefined. Your theme is using the material icons. The list of material icons can be found on the URL below.
https://material.io/resources/icons/?style=baseline

You need to replace the "shopping-cart" (As you mentioned on the highlighted section), with the text defined in the above URL for icons.

Like replace "shopping-cart" with "shopping_bag" to replace the icons as shown in the screenshot below.
https://prnt.sc/tmdooi

Ok, thanks! But I tried using the img src tag and it does not really work. I thought it was as simple as saving my image in a folder inside the project and then putting the path inside "src", but I guess I am doing something wrong?

[Andriano]

Replace <i></i> by <img src="folder/myicon.png" alt=""> in tpl. To disable the tag <i></i> don't delet it, just comment it with tag <!--   -->(See html doc firefox). Don't forgot to put the complete url of your icon image(example "http://mywebsite/folder/icon.png"). You can put a custom image with FTP transfer and you can create custom folder.

[artistik]

hello 

i am on 8.1.6 and i didn't manage to do it 

I try . 

After I go to there : 

url.com/themes/classic/modules/ps_shoppingcart

I edit shoppingcart.tpl like you say and indicate the path of image or icon (png or svg) and nothing happen 

Here is the code i use : 

<img src=«https://url.com/themes/classic/modules/ps_shoppingcart/trolley.png» alt=''>
        <span class="hidden-sm-down">{l s='Cart' d='Shop.Theme.Checkout'}</span>
        <span class="cart-products-count">({$cart.products_count})</span>
      {if $cart.products_count > 0}
        </a>
      {/if}
    </div>
  </div>
</div>

in fact i would like to use an icon not a png but even just to try it didn't work 

 

If you know what to do, 

 

thanks 

[Andrei H]

Hello @artistik,

The problem in your case is most likely the fact that you are using '«' instead of double/single quotes for the src attribute.

If the .png is bigger than the icon, you will need to use some CSS in order to resize it as well. You can also use the height/width attributes.

Here is an example of how it should look like:

<img src="https://url.com/themes/classic/modules/ps_shoppingcart/trolley.png" alt="shopping-cart-icon" width="25" height="25">

Make sure that you can also access https://url.com/themes/classic/modules/ps_shoppingcart/trolley.png using the browser, otherwise it will not show up.

Please also make sure that in Admin -> Advanced Parameters -> Performance, in the Smarty tab, the Template compilation is set to either "Recompile templates if the files have been updated" or "Force compilation".

Edited May 31 by Andrei H (see edit history)

[artistik]

Hello Andrei

thank you for your answer ! 

 

I try and it didn' work

 

I have child theme so i copy paste your line on shoppingcart.tpl

i resize my picture on 25x25px and my cache is disable

As well, i have done commande Maj+R to refresh and disable browser cache but nothing more

 

My picture in on 777 Chmod

If you say more about, tell me 

 

Thanks 

 

Greg

 

[artistik]

hello 

I try again and didn't work but seems better

I  don't know what s going on . 

Maybe it is because i modify on child theme and not on parent theme? 

I try to clear my cache and i have this appears after in private nav 

 

Here is code i modify : 

$cart.products_count] d='Shop.Theme.Checkout'}" href="{$cart_url}">
      {/if}
        <img src="https://152..../themes/child_classic/modules/ps_shoppingcart/shopping-cart.png alt="shopping-cart" width="25" height="25">
        <span class="hidden-sm-down">{l s='Cart' d='Shop.Theme.Checkout'}</span>
 

can someone tell me more

[Andrei H]

Hi @artistik,

Sorry for the delay.

You usually get that broken icon when the browser cannot find the image at the specified location.

If you manually open the link from the src attribute, does that display the image?

[Webski Gość]

Hello @artistik

You can approach the problem in several different ways, below are two of the simplest.

1. Add SVG icon (replace <i> tag with icon):

<svg class="custom-shopping-cart" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g stroke="#2a353d" stroke-width="1.5"><g stroke-linecap="round"><path d="m8 16h7.2632c4.4876 0 5.1701-2.8192 5.9978-6.93092.2388-1.18597.3582-1.77895.0711-2.17401-.2871-.39507-.8374-.39507-1.938-.39507h-13.3941"/><path d="m8 16-2.62127-12.48507c-.22258-.89034-1.02255-1.51493-1.94028-1.51493h-.93845"/><path d="m8.88 16h-.41143c-1.36335 0-2.46857 1.1513-2.46857 2.5714 0 .2367.1842.4286.41143.4286h11.08857" stroke-linejoin="round"/></g><circle cx="10.5" cy="20.5" r="1.5"/><circle cx="17.5" cy="20.5" r="1.5"/></g></svg>

2. Link image / SVG using CSS (change class in <i> tag):

Simple class with image:

.icon-shopping-cart {
  display: block;
  height: 32px;
  width: 32px;
  background-size: cover;
  background-clip: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://static-00.iconduck.com/assets.00/shopping-cart-icon-490x512-t9ecz6iv.png);
}

or SVG mask to easy change color by background color:
(example for theme.css in classic theme and folder with icons in /public_html/themes/classic/assets/icons)

.icon-shopping-cart {
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  height: 32px;
  width: 32px;
  background-color: #000000;

  -webkit-mask-image: url(../icons/shopping-cart.svg);
  mask-image: url(../icons/shopping-cart.svg);
}

and of course add <i> tag with class name

<i class="icon-shopping-cart"></i>

In example, I use icon from: Hugeicons Essential Free Icons You can find it here on Icon Duck

Edited June 14 by Webski Gość (see edit history)

[artistik]

hello 

thanks for answer, 

unfortunately don't look able to do it by my own, 

 

I will try with creative elements module