Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

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

 
  • clips
  • Aged Resident Loon
  • Members
  • Join Date: 14-Jan 07
  • 1650 posts

Posted 15 March 2013 - 03:18 AM #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.

Attached Thumbnails

  • payment-icons.png

Regards,
Jim

 

Posted 15 March 2013 - 07:56 AM #2

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.


Hope this helps.

Please do share your feedback also please feel free to reply in case any further help or assistance is required.

Thanks,
Vishakha
Chilliapple Ltd.
Registered Solution Partner of Cs-cart

http://chilliapple.co.uk

 
  • clips
  • Aged Resident Loon
  • Members
  • Join Date: 14-Jan 07
  • 1650 posts

Posted 15 March 2013 - 01:43 PM #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.
Regards,
Jim

 
  • johnbol1
  • Never Re
  • Members
  • Join Date: 23-Feb 10
  • 5004 posts

Posted 15 March 2013 - 06:07 PM #4

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

John

Custom printed hi visibility clothing sale the UK's online hivis safety shop
v4.5.2


 
  • clips
  • Aged Resident Loon
  • Members
  • Join Date: 14-Jan 07
  • 1650 posts

Posted 15 March 2013 - 08:25 PM #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?
Regards,
Jim

 
  • johnbol1
  • Never Re
  • Members
  • Join Date: 23-Feb 10
  • 5004 posts

Posted 15 March 2013 - 08:35 PM #6

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?


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

JOhn

Custom printed hi visibility clothing sale the UK's online hivis safety shop
v4.5.2


 
  • drhoo
  • Member
  • Members
  • Join Date: 11-Oct 11
  • 46 posts

Posted 12 December 2013 - 01:45 AM #7

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.


Hope this helps.

Please do share your feedback also please feel free to reply in case any further help or assistance is required.

Thanks,
Vishakha


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

{** block-description:tmpl_payment_icons **}
<div class="payment-icons">
<!-- <span class="payment-icon 2checkout">&nbsp;</span>-->
<span class="payment-icon paypal">&nbsp;</span>
<!-- <span class="payment-icon google-checkout">&nbsp;</span>-->
<span class="payment-icon mastercard">&nbsp;</span>
<span class="payment-icon visa">&nbsp;</span>
</div>

 
  • clips
  • Aged Resident Loon
  • Members
  • Join Date: 14-Jan 07
  • 1650 posts

Posted 12 December 2013 - 03:25 AM #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.
Regards,
Jim

 
  • StellarBytes
  • Senior Member
  • Members
  • Join Date: 08-Aug 11
  • 1807 posts

Posted 12 December 2013 - 11:34 AM #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.
Hire StellarBytes for CS-Cart Design & Development Services

 
  • clips
  • Aged Resident Loon
  • Members
  • Join Date: 14-Jan 07
  • 1650 posts

Posted 12 December 2013 - 02:06 PM #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.
Regards,
Jim

 
  • StellarBytes
  • Senior Member
  • Members
  • Join Date: 08-Aug 11
  • 1807 posts

Posted 12 December 2013 - 03:08 PM #11

*
POPULAR

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 **}
<div class="payment-icons">
	<span class="payment-icon american-express">&nbsp;</span>
	<span class="payment-icon visa">&nbsp;</span>
	<span class="payment-icon mastercard">&nbsp;</span>
	<span class="payment-icon discover">&nbsp;</span>
	<span class="payment-icon paypal">&nbsp;</span>
</div>
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

Attached Thumbnails

  • payment-icons.jpg

Hire StellarBytes for CS-Cart Design & Development Services

 
  • Onkel_Sid
  • Junior Member
  • Members
  • Join Date: 04-Sep 10
  • 301 posts

Posted 12 December 2013 - 10:59 PM #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.

Stop smoking start vaping: Dampskyen.no


 
  • StellarBytes
  • Senior Member
  • Members
  • Join Date: 08-Aug 11
  • 1807 posts

Posted 12 December 2013 - 11:09 PM #13

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.

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.
Hire StellarBytes for CS-Cart Design & Development Services

 
  • Onkel_Sid
  • Junior Member
  • Members
  • Join Date: 04-Sep 10
  • 301 posts

Posted 12 December 2013 - 11:50 PM #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.

Stop smoking start vaping: Dampskyen.no


 
  • burko
  • Newbie
  • Trial users
  • Join Date: 04-Nov 21
  • 10 posts

Posted 30 November 2021 - 05:22 AM #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 **}
<div class="payment-icons">
	<span class="payment-icon american-express">&nbsp;</span>
	<span class="payment-icon visa">&nbsp;</span>
	<span class="payment-icon mastercard">&nbsp;</span>
	<span class="payment-icon discover">&nbsp;</span>
	<span class="payment-icon paypal">&nbsp;</span>
</div>
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?



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 22537 posts

Posted 30 November 2021 - 01:25 PM #16

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


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 1210     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 4025     CS-Cart + YOUPI      USD 1459      Multi-Vendor Ultimate       USD 7500 (6000)