Magento Tutorial – Payment Icons on Checkout

Making an e-commerce website as usable as possible is a major factor in its success. If a customer finds it difficult or frustrating to checkout then they’ll give up and go elsewhere. Therefore every little bit of detail that can help with this process of ecommerce web design. When a customer suggested having the logos appear next to the various payment options, it was a great idea that can very easily be implemented into all stores.

To do this you need to start by creating 3 images, and saving them in the same folder. The name of the images need to be exactly the same as the value in the input box, so it might be ‘paypal_standard’ or ‘paypal_direct’ etc. You can check this by viewing the source on the checkout page. My images were therefore called paypal_standard.gif etc. The name of the payment methods is called with this code: <?php echo $_code ?>. So to add the code, go to:

template/checkout/onepage/payment/methods.phtml

Just after this code:

<label for=”p_method_<?php echo $_code ?>”><?php echo $_method->getTitle() ?></label>

Add this code (except replace yourdomain with…. your domain:

&nbsp;&nbsp;<img alt=”<?php echo $_method->getTitle() ?>” src=”//www.yourdomain.co.uk/images/<?php echo $_code ?>.jpg” />