How to add an image to your payment methods on PrestaShop 1.7 or 8

PrestaShop version 1.7 has integrated a new presentation of the payment method choice as a list with radio buttons.

This new layout has removed the display of the payment method logos during the selection process, which may disturb your customers or yourself.

Some modules, such as the Monetico module I propose, properly integrate the display of a logo.

I'll explain how to override your payment modules to successfully integrate the payment logo you want.

Override of the check payment module

I will use PrestaShop's native check payment module to explain the method used that you can reproduce on any payment module.

To display this payment method, PrestaShop payment modules must be grafted on the hookPaymentOptions($params).

This module returns the data of an object in an array using return [$newOption];

Thus, your overload will simply have to recover this object to add your logo to it.

To do so, you just have to create a new ps_checkpayment.php file in the override/modules/ps_checkpayment directory.

In this file we will override the initial class

class Ps_CheckpaymentOverride extends Ps_Checkpayment

Then we override the initial hook call

public function hookPaymentOptions($params)

Finally we get the initial value of the object returned by the module hook

$newOptions = parent::hookPaymentOptions($params)[0];

We add a logo as an image file accessible directly on the web, personally I use the service offered by imgur.com to store my remote images

newOptions->setLogo('https://i.imgur.com/t2sYpef.png');

And finally we return the result as an object in an array

return [$newOptions];

This gives as a final result

This displays the desired logo on the payment method, here are the contents of the file.

class Ps_CheckpaymentOverride extends Ps_Checkpayment
{
	public function hookPaymentOptions($params)
	{
		$newOptions = parent::hookPaymentOptions($params)[0];
		$newOptions->setLogo('https://i.imgur.com/t2sYpef.png');

		return [$newOptions];
	}
}

Improvement of the layout

As the previous result shows, the display is not suitable.

There are two ways to make this acceptable.

Either you use only images of the same size to avoid a difference in display between the payment methods.

The second solution is to customize the CSS for your theme.

I remind you that any CSS customization in your theme must be done in the custom.css file of your theme, if this file does not exist, create it in the assets/css directory of your theme.

So, for the classic theme: themes/classic/assets/css/custom.css.

In this file I add a rule so that the logos are limited in height and I added a positioning on the left to keep if you prefer this presentation:

.payment-options img {
	max-height: 40px;
	float: left;
	margin-right: 1em;
}

I also add a rule to define a line height for the text and thus align the text and the image properly:

.payment-options .payment-option label {
	line-height: 40px;
}

And here is the result:

As you can see, the result can be improved, but I invite you to intervene directly on the display in the theme in the template files.

Conclusion

The overloads of this type will disappear in the next versions of PrestaShop, yet they are quite practical and quick to implement.

Hopefully this can help you in improving your PrestaShop stores.