The question:
How could I insert an image at the side of the payment method on checkout.
In example, at the side of credit cards payment method I want to display the Visa and Master Cards logo.
The Solutions:
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
Method 1
There are two ways to do this. Both require some work on your theme/template.
This is the quick & dirty way and works great if you want to have your image(s) BEFORE the Payment Method name:
See if you have a file called app/design/frontend/-custom_package-/-custom_theme-/template/checkout/onepage/payment/methods.phtml where -custom_package- and -custom_theme- are the names of your theme.
If this file exists, make a backup copy of it so you can revert to that if you break things.
If it doesn’t exist, copy this file from app/design/frontend/base/default/template/checkout/onepage/payment/methods.phtml to the same directory in your theme. You might have to create the checkout/onepage/payment/ folder in your custom theme.
Open (your copy of) methods.phtml with your favourite editor.
find the following line:
<label for="p_method_<?php echo $_code ?>"><?php echo $this->escapeHtml($this->getMethodTitle($_method)) ?> <?php echo $this->getMethodLabelAfterHtml($_method) ?></label>
In my copy of base/default/template/checkout/onepage/payment/methods.phtml I found it on line 54.
Change this line as follows:
<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>
Make sure you name your label-images after the $_code. so for the Saved CC payment method, the code is ccsave, your image would have to be called ccsave.jpg.
If you want the images to appear AFTER the label, you can do here as well. Just change the location of where you insert the images.
But as you might have noticed: Magento comes with support for html after the label out of the box: <?php echo $this->getMethodLabelAfterHtml($_method) ?>. It’s the Magento way of doing this, but it’s a bit harder to setup though and involves adding a block using XML and creating custom .phtml files. You can find a bit more background on this here.
BTW: More information on Magento themes/templates can be found here.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0