How do you edit the "payment systems icons" on bottom of page

General Installation & Upgrade
1

I am trying to figure out how to edit or change the “payment systems icons” or the payment icons that are located at the bottom of all pages.



I know I can turn off the block or just delete it, but it seems there should be some place to edit what is show and I can figure out where.

payment-icons.png

2

[font=verdana,geneva,sans-serif][size=3]Hi Clips,



Here we go:


Go to admin Panel->design->Blocks->default . you can find the “Payment Icons” block in the bottom grid.

To change the Payment Icons: open the page: skins\basic\customer\blocks\static_templates\payment_icons.tpl



here you can see that every icon is managed by Class.

You can remove the existing Icon or can add new one.

For this you need to make change in “base.css” file

.payment-icon {} This content the Payment icons and following css makes them avable to display there.

So you can add new image and css from here and can display then on your site.[/size][/font]



[font=verdana,geneva,sans-serif]Hope this helps. [/font]



[font=verdana,geneva,sans-serif]Please do share your feedback also please feel free to reply in case any further help or assistance is required.[/font]



[font=verdana,geneva,sans-serif]Thanks,[/font]

[font=verdana,geneva,sans-serif]Vishakha[/font]

3

Thanks for the reply!



So my hunch was correct. In order to “change” the payment methods you have to “manually” edit this with the .tpl. I'm sorry, but I really thought CS was getting past this sort of editing. They basically just rigged the design in order to make it look easy, but instead it is not. Not that the .tpl edit is rocket science, but there is no reason somthing within the admin should have been put there. For example, if I show I accept Paypal, Visa, MC, Discover or whatever, then that is what should be shown. Instead they created a generic .tpl that may fit some, but won't fit most. Cutting corners.

4

I deleted it and just inserted a new block with .html



John

5

Hi John, I think that is what I am going to do. I guess I am partly irritated because I spent a couple of hours researching and trying to figure out how to “change” something that ended up being a fake feature. It is yet another piece of “partially” written code that they never really finished. Why in the world would you create a .tpl that cannot easily be edited by each particular store?

6

[quote name='clips' timestamp='1363379130' post='157866']

Hi John, I think that is what I am going to do. I guess I am partly irritated because I spent a couple of hours researching and trying to figure out how to “change” something that ended up being a fake feature. It is yet another piece of “partially” written code that they never really finished. Why in the world would you create a .tpl that cannot easily be edited by each particular store?

[/quote]



I thought similar, in the end done a transparent .png



JOhn

7

[quote name='chilliapple' timestamp='1363334161' post='157831']

[font=verdana,geneva,sans-serif][size=3]Hi Clips,



Here we go:


Go to admin Panel->design->Blocks->default . you can find the “Payment Icons” block in the bottom grid.

To change the Payment Icons: open the page: skins\basic\customer\blocks\static_templates\payment_icons.tpl



here you can see that every icon is managed by Class.

You can remove the existing Icon or can add new one.

For this you need to make change in “base.css” file

.payment-icon {} This content the Payment icons and following css makes them avable to display there.

So you can add new image and css from here and can display then on your site.[/size][/font]



[font=verdana,geneva,sans-serif]Hope this helps. [/font]



[font=verdana,geneva,sans-serif]Please do share your feedback also please feel free to reply in case any further help or assistance is required.[/font]



[font=verdana,geneva,sans-serif]Thanks,[/font]

[font=verdana,geneva,sans-serif]Vishakha[/font]

[/quote]



Done this several times, cleard my cs-cart and browser cash and nothing is changing:



{** block-description:tmpl_payment_icons **}



 

 
 
8

I still have not figured this out. It is very baffling to me why they would put the payment icons on there and then make it a pain in the next to change. While some things do get easier to change, it often feels like every time we get 1 thing that is easier, we get 2 more things that are either broke or a pain to change/alter.

9

What icons are you trying to show/slide? All you have to do is remove the relevant HTML from payment_icons.tpl and then change the CSS background-position values for those you want to display. I have changed them in CS4 including changing the actual sprite image and the CSS (albeit I applied the CSS change via my_changes method) to display specific icons.

10

I am trying to show relevant credit cards we accept. The images are the ones shown in the initial post up above. For example, it shows 2checkout and we do not want that. It actually seems very strange that they would choose this as a default on the shopping cart. I was just trying to show Amex, Visa, MC, Discover and Paypal. I have changed the payment_icons.tpl but it does not show even when I clear the cache or try a different browser. I am guessing that at some point I must have done something right, but unfortunatly it is now showing the 2CO twice.



On the my_changes method, I have not worked with it much in vs4 and did very little in vs2. I had a few changes made by others and then later I went back in and changed it using that method but I am having to relearn what I did…although I didn't really know much about that part before.



This again should not be this crazy to change. You should be able to open up the “Payment Icon” Layout and just choose which methods of payment you offer.

11

Enable 'My Changes' addon.



Create:-

design/themes/yourtheme/templates/addons/my_changes/hooks/index/styles.post.tpl

styles.post.tpl contents:-

{style src="addons/my_changes/mystyles.css"}



Create:-

/design/themes/yourtheme/css/addons/my_changes/mystyles.css

Code for mystyles.css:-


.payment-icon.american-express, .cc-icon .american-express {
background-position: -100px -200px;
}
.payment-icon.discover, .cc-icon .discover {
background-position: -200px -200px;
}






Open:-

/design/themes/yourtheme/templates/blocks/static_templates/payment_icons.tpl

Replace all contents with:-

```php {** block-description:tmpl_payment_icons **}


 
 
 
 
 
```
Save files to your server and clear the cache in admin using &cc&ctpl

The desired result is as attached.

You should also be able to override the payment_icons.tpl for foolproof upgrades in future:-
```php /design/themes/yourtheme/templates/addons/my_changes/blocks/static_templates/payment_icons.tpl ```

payment-icons.jpg

12

All you have to do is edit the file called : checkout-sprite-32px.png in Photoshop, and you are good to go. If you are just showing 5 icons, and on the same place you don't have to mess with any other files.

13

[quote name='Onkel_Sid' timestamp='1386889195' post='173433']

All you have to do is edit the file called : checkout-sprite-32px.png in Photoshop, and you are good to go. If you are just showing 5 icons, and on the same place you don't have to mess with any other files.

[/quote]

You could do it this way but it requires a minimal degree of skill in Photoshop which not everybody has. Doing it this way would also result in the need to have to create a my_changes stylesheet and use a custom graphic name to ensure your changes are not lost in an upgrade.

14

Yeah i know, but me, I am more comfortable with Photoshop than coding. Doing it this way you can also change the icons to another design. Just an alternative easier way of doing it.



Besides this isn't hard to do in Photoshop. Just a little copy, paste and cropping. Make the new icons exactly the same size as the old ones. If you have bought Photoshop you should be able to do this.

15

Enable 'My Changes' addon.

Create:-

design/themes/yourtheme/templates/addons/my_changes/hooks/index/styles.post.tpl
styles.post.tpl contents:-
{style src="addons/my_changes/mystyles.css"}
Create:-
/design/themes/yourtheme/css/addons/my_changes/mystyles.css
Code for mystyles.css:-
.payment-icon.american-express, .cc-icon .american-express {
background-position: -100px -200px;
}
.payment-icon.discover, .cc-icon .discover {
background-position: -200px -200px;
}

Open:-
/design/themes/yourtheme/templates/blocks/static_templates/payment_icons.tpl
Replace all contents with:-
{** block-description:tmpl_payment_icons **}


	 
	 
	 
	 
	 
Save files to your server and clear the cache in admin using &cc&ctpl

The desired result is as attached.

You should also be able to override the payment_icons.tpl for foolproof upgrades in future:-
/design/themes/yourtheme/templates/addons/my_changes/blocks/static_templates/payment_icons.tpl

Just for dummies like me, where on the server should the icons be saved for this to display them?

16

The icons are display through CSS. The easiest way - is to create your own HTML block with required images.