Showing results for 
Search instead for 
Did you mean: 

How to add icon on payment method?

How to add icon on payment method?

I want to add icon to payment method to be like this

this is the code from app/design/frontend/package/theme/template/checkout/onepage/payment/methods.phtml


<label for="p_method_<?php echo $_code ?>"><?php echo $this->escapeHtml($this->getMethodTitle($_method)) ?> <?php echo $this->getMethodLabelAfterHtml($_method) ?></label>

I have found this answer in some other guys asking


Go to app/design/frontend/{your package}/{your theme}/template/checkout/onepage/payment/methods.phtml if you haven't it in your theme, copy it from the {your package}/default or base/default

add this: <img src="<?php echo $this->getSkinUrl('images/'.$_code.'.jpg') ?>" alt="<?php echo $this->escapeHtml($this->getMethodTitle($_method)) ?>" /> after p_method_<?php echo $_code ?>

So you'll have something like this:

<label for="p_method_<?php echo $_code ?>"><img src="<?php echo $this->getSkinUrl('images/'.$_code.'.png') ?>" alt="<?php echo $this->escapeHtml($this->getMethodTitle($_method)) ?>" /> <?php echo $this->escapeHtml($this->getMethodTitle($_method)) ?> <?php echo $this->getMethodLabelAfterHtml($_method) ?></label>

but this seems to be for 1 Icon, how would be the code if I want it to be for 3 Icons?


thank you




Re: How to add icon on payment method?

The code you've found looks good to me. The $code in the image name means you can have a unique image per payment method. For payment methods where you need to show three payment icons (like on bank transfer in your example), simply create a single image with all three card icons in Smiley Happy 

If you've found one of my answers useful, please give "Kudos" or "Accept as Solution" as appropriate. Thanks!