Payment Options Logos

[Mark Redford]

Hi,
I see on some of the demo sites (Villagio theme) that there are logos eg paypal, visa and mastercard credit card etc alongside the payment options on the checkout page. Is it possible to add these to the checkout page on any theme? Or is it only with Motopress themes?

[Andre Flores]

Hi, Mark!

Overall you may add payment logos yourself, using some widgets or custom HTML, depending on where exactly you would like them to be placed. For example, on our Booklium demo logos in footer are added via Text widget with custom HTML.

Regards,
Andre

[Mark Redford]

Thanks Andre, I’m perfectly happy to write the html and css, but just wanted to know where to put this in order to output the logos alongside each payment method. Currently the checkout page just has the shortcode [mphb_checkout] on it. So where do I set up the html to pull the appropriate logo in to the page alongside each payment method?

[Andre Flores]

Hi, Mark!!

Thank you for clarification. You may try adding corresponding payment method icons next to each method via Font Awesome icons in CSS. You may find the list of payment methods Font Awesome icons unicodes here. Icons can be added via CSS, here is an example:

.mphb-gateway.mphb-gateway-paypal::before {
	content: "\f1f4";
	font-family: "FontAwesome";
}

Make sure to use have appropriate version of Font Family added to your website, so the icon is actually displayed.

Regards,
Andre

[Mark Redford]

Perfect Andre! Have set logos up for all the payment methods we take now, looks great!

Thank you so much!

[Andre Flores]

You are most welcome, Mark!

Regards,
Andre

[Kent Richardson]

Hi Andre, how do you install the font family? I tried inserting:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”&gt;

in the header.php file of my theme and it doesn’t appear to accomplish anything.

A little icon f1f4 appears in a little square before the PayPal gateway, which seems like I haven’t ‘installed’ the correct font family.

Have I used the wrong code?

[Kent Richardson]

Just further to my above question, I’ve created a child theme and got it working correctly…

I created a functions.php and used the following code:

<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );

function enqueue_parent_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘enqueue_load_fa’ );
function enqueue_load_fa() {
wp_enqueue_style( ‘load-fa’, ‘https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&#8217; );
}

When I add the CSS that Andre suggested in a couple of posts above, a little square appears but it’s empty.

Is there anything I’ve obviously done wrong?

[Andre Flores]

Hi, Kent!

Have you tried other icon codes? If no icons work, this means the font was not initialized properly. Here is a nice thread on how to add Font Awesome to WordPress.

Regards,
Andre

[Kent Richardson]

View post on imgur.com

Hi Andre, thanks for your reply.

I did actually follow that article 🙂

If you have a look at my screenshots, you’ll see where it’s not working.

I’ve tried a few of the icon codes and they don’t work, they just appear really small inside a little box.

Have I got the code in the wrong place or something?

[Andre Flores]

Hi, Kent!

Kindly provide me with your website URL, so I take a closer look at the issue.

Regards,
Andre

[Kent Richardson]

This reply has been marked as private.

[Andre Flores]

This reply has been marked as private.

[Kent Richardson]

Hi Andre, that worked, thank you so much 🙂

[Andre Flores]

Hi, Kent!

You are most welcome, I am glad I could help 🙂

Regards,
Andre

[Author]

Posts