Adding payment logos through out your website

[Jimmy77]

How do you edit the logos displayed in the payment logo block?

 

I have Mastercard, visa and paypal as default but I'd like to remove paypal and add others.

[hxd]

You can do this by editing the blockpaymentlogo.tpl file. Assuming your PrestaShop is installed directly in the public_html folder on your hosting account, then the path to the file would be public_html/modules/blockpaymentlogo/blockpaymentlogo.tpl.

 

In that file you'll find the following code:

 

<div id="paiement_logo_block_left" class="paiement_logo_block">
<a href="{$link->getCMSLink($cms_payement_logo)}">
<img src="{$img_dir}logo_paiement_visa.jpg" alt="visa" width="33" height="21" />
 <img src="{$img_dir}logo_paiement_mastercard.jpg" alt="mastercard" width="32" height="21" />
 <img src="{$img_dir}logo_paiement_paypal.jpg" alt="paypal" width="61" height="21" />
</a>
</div>

 

To hide the PayPal image for example, delete or comment out the following code:

 

<img src="{$img_dir}logo_paiement_paypal.jpg" alt="paypal" width="61" height="21" />

 

To add other logos, first you need to upload the image on your hosting account. Assuming you use the default prestashop theme, upload the image in public_html/themes/prestashop/img. Then edit the blockpaymentlogo.tpl file. Let's say that the file name of the uploaded image is new_logo.jpg, then you should add the following code:

 

<img src="{$img_dir}new_logo.jpg" alt="new logo" width="51" height="21" />

 

Of course, you can change the dimensions for width and height. Using the above examples, if you hide the PayPal logo and you add the example one, the code in the blockpaymentlogo.tpl file would look like this:

 

<div id="paiement_logo_block_left" class="paiement_logo_block">
<a href="{$link->getCMSLink($cms_payement_logo)}">
<img src="{$img_dir}logo_paiement_visa.jpg" alt="visa" width="33" height="21" />
 <img src="{$img_dir}logo_paiement_mastercard.jpg" alt="mastercard" width="32" height="21" />
 <img src="{$img_dir}new_logo.jpg" alt="new logo" width="51" height="21" />
</a>
</div>

 

Don't forget that when you edit tpl files you need to enable the Force Compile option so that you can see the changes after you refresh the frontend of your site. You can enable it from the back office (Preferences tab>Performance sub-tab). After you're done with the changes disable it.

 

Hope this helps.

Edited August 12, 2012 by hxd (see edit history)

[Jimmy77]

Thanks hxd. All sorted now. Excellent instructions.

 

Jimmy

[benjamin utterback]

hxd, that is simply superb! We thank you so much for your effort and care into this. If I could give you a million likes I would