8

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.

11

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.

  • Your welcome ;) – Ottonet Mar 16 '15 at 14:30

protected by Community Jan 24 '17 at 16:26

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.