Edit appearance of payment methods in Magento

Question

I would like to edit the way payment methods appear in Magento’s checkout by inserting an image with the flags that each payment system accepts, but I’m not getting.

Which . phtml I should edit?

Answer 1

There is a very easy way to do this and it works great if you want to have your pictures before the payment method name:

See if you have a file called app/design/frontend/seu-tema/seu-tema/template/checkout/onepage/payment/methods.phtml

If this file exists, make a backup of it. If it does not exist, copy this file to app/design/frontend/base/default/template/checkout/onepage/payment/methods.phtml for the same folder in your theme, as I mentioned before (if it does not exist, create checkout/onepage/payment/).

Open (your copy of) methods.phtml in the editor and locate the following line:

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

Here was line 54.

Change to:

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

Enter the image on the theme skin, for Gamuza’s Itaú Shopline payment method (which I use), the code is itaushopline_standard, then the image called is itaushopline_standard.jpg.

If you want to remove the payment name and have only the image, the easiest way is not to rename the payment in the backend. ;)