Position of Payment Icons

  • Resolved may

    (@mcp2019)


    2 years, 4 months ago

    Hi,

    I’ve read about this issue on previous threads from at least 1 year ago and was wondering if there’s a solution by now.

    The position of the Mollie payment icons is right after the payment text, instead of aligned to the far right of the line.

    I found in another thread some CSS provided by Mollie but those don’t work for me (see below):

    .mollie-gateway-icon {
    width: 32px;
    vertical-align: top;
    float:left
    }

    #payment .payment_methods li img {
    float:left;
    margin: 0 .5em 0 0 ;
    }

    #payment .payment_methods>.wc_payment_method>label::before {
    float:left;
    }`

    When inspecting the checkout page I found that the payment icons are aligned to the right as a default by Mollie. They are aligned to the right, but I just cannot get any space between the text and the icons.

    Is there a way to solve this?

    Thank you.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Syde Niklas

    (@niklasinpsyde)

    Hi @mcp2019,

    Some custom CSS examples like the one you mentioned are listed in the GitHub wiki here: https://github.com/mollie/WooCommerce/wiki/FAQ#how-to-customize-icons-on-mollie-gateway

    It’s important to note this custom CSS only works with the classic WooCommerce Checkout and not with the new WooCommerce Blocks Checkout. Could you maybe share a link to your site so we can see the CSS?

    There can also be conflicting behavior with the theme styling if it’s not aligning for you. Have you given it a try with the default Storefront theme, for example?
    Thanks!

    Kind regards,
    Niklas

    Thread Starter may

    (@mcp2019)

    Hi @niklasinpsyde,

    Thanks for your reply.

    I’ve taken a look at the github link.

    The thing is, as a default, the payment icons don’t align to the right as they should be according to the article at github.

    I’m using Hello Elementor Theme and tested the checkout page with the Storefront Theme. This does solve the problem of aligning the payment icons. They align to the right as a default, just where I want them to be. However, I’m not looking for another change of theme.

    I’ve included 2 screen shots from inspecting the checkout page below (website is not live yet).

    https://freeimage.host/i/SE2dEF
    https://freeimage.host/i/SE22rg

    If you have any tips, I’m happy to learn! Thank you.

    Plugin Support Syde Niklas

    (@niklasinpsyde)

    Hey @mcp2019,

    This should be possible with the Hello Elementor theme, but I must admit I’m reaching the limits of my CSS knowledge here. I’ll ask around with the developers for more input, but we usually do not provide custom CSS as this can be different for every theme.

    By default, WooCommerce displays payment gateway icons on the right side (see the Storefront theme), but every theme can apply different styling to the checkout. For more details on how to apply the needed theme customization, I suggest reaching out to the Hello Elementor theme developer.

    Kind regards,
    Niklas

    Thread Starter may

    (@mcp2019)

    Hi @niklasinpsyde,

    Thanks for your reply.

    Since it’s likely to be a Theme issue, I’ll reach out to the Hello Elementor theme developers.

    Thank you again.

    Plugin Support Syde Niklas

    (@niklasinpsyde)

    Hi @mcp2019,

    I am sure this would not be the first time the Hello Elementor team is asked how to move the gateway icons. So maybe they have some CSS at hand. When the theme applies custom styling, this is usually consistent across payment gateways.
    When this custom style is changed, all icons from different payment gateway should align accordingly.
    But please let us know if the Hello Elementor support doesn’t bring you any further and I’ll ask around a bit more.
    Thanks!

    Kind regards,
    Niklas

    Thread Starter may

    (@mcp2019)

    Hi @niklasinpsyde,

    I came across this thread https://www.ads-software.com/support/topic/icon-alignment-next-to-title/ and solved the problem!

    It’s this bit of CSS that did the trick:

    .wc_payment_methods li label {
    display: inline!important; }

    Thank you for your help and maybe this can help others out too ??

    Plugin Support Syde Niklas

    (@niklasinpsyde)

    Thanks for the feedback! Glad to hear you found a fitting solution.
    If you have any doubts or further questions, please do not hesitate to let us know.
    Thanks!

    Kind regards,
    Niklas

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Position of Payment Icons’ is closed to new replies.