Payment Options Logos

  • This topic has 14 replies, 3 voices, and was last updated 1 week, 2 days ago by Andre Flores.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #977606
    Mark Redford
    Participant

    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?

    #977750
    Andre Flores
    Moderator

    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

    #977779
    Mark Redford
    Participant

    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?

    #978649
    Andre Flores
    Moderator

    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

    #978776
    Mark Redford
    Participant

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

    Thank you so much!

    #979084
    Andre Flores
    Moderator

    You are most welcome, Mark!

    Regards,
    Andre

    #982527
    Kent Richardson
    Participant

    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?

    #982924
    Kent Richardson
    Participant

    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?

    #982946
    Andre Flores
    Moderator

    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

    #983022
    Kent Richardson
    Participant

    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?

    #984284
    Andre Flores
    Moderator

    Hi, Kent!

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

    Regards,
    Andre

    #984326
    Kent Richardson
    Participant
    This reply has been marked as private.
    #984900
    Andre Flores
    Moderator
    This reply has been marked as private.
    #985324
    Kent Richardson
    Participant

    Hi Andre, that worked, thank you so much 🙂

    #985719
    Andre Flores
    Moderator

    Hi, Kent!

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

    Regards,
    Andre

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.