Xpress Buttons and ApplePay button

  • Resolved criswoofi

    (@criswoofi)


    1 year ago

    Hi, first of all congratulations for your great plugins!!

    Could you help me with a couple of questions?

    1.Is it possible to change the layout of the buttons in the xpress payment? I attached a screenshot of how I would like them to look. Could you give me a CSS code to implement it please.

    https://ibb.co/93D4c3j

    2. When choosing Apple Pay from the list of payment methods the button does not fill the space (mobile and desktop) how can I solve this? With the GooglePay button I don’t have this problem. I attach a screenshot.

    https://ibb.co/sCprpWm

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Payment Plugins

    (@mrclayton)

    Hi @criswoofi

    1. Yes, it is possible to change the express checkout payment buttons using CSS. 
    .wc-stripe-banner-checkout ul.wc_stripe_checkout_banner_gateways{
    display: flex;
    align-items: center;
    justify-content: center;
}

.wc-stripe-banner-checkout ul.wc_stripe_checkout_banner_gateways li{
    margin: 10px !important;
    width: 100% !important;
}

.wc-stripe-banner-checkout ul.wc_stripe_checkout_banner_gateways li.banner_payment_method_ppcp{
    font-size: 0px;
}

wc-stripe-banner-checkout ul.wc_stripe_checkout_banner_gateways li button{
    width: 100% !important;
    min-width: 100% !important;
}

    2. This CSS will expand the button

      .woocommerce-checkout-payment .apple-pay-button {
        max-width: !100%;
    }

    Kind Regards

    Thread Starter criswoofi

    (@criswoofi)

    Hi! Thank you for your quick response.

    1. The CSS code does not work correctly on a mobile device, I attach screenshot.

    https://ibb.co/PmWjPcD

    2. It doesn’t work, it doesn’t fully expand the button,I attach screenshot.

    Mobile: https://ibb.co/F8sLyxf

    Desktop: https://ibb.co/9sfhkVH

    3.Could be possible to change the font and style of the title “Xpress Payment”

    Thanks!

    Plugin Author Payment Plugins

    (@mrclayton)

    The CSS code does not work correctly on a mobile device, I attach screenshot.

    I’ve given you the general template for what CSS you need. You can put the finishing touches on what you need to suite your website.

    It doesn’t work, it doesn’t fully expand the button,I attach screenshot.

    It worked when I added it to your site. Try this:

    @supports (-webkit-appearance: -apple-pay-button) {
       .woocommerce-checkout-payment .apple-pay-button {
        max-width: 100% !important;
    }
}

    Kind Regards

    Thread Starter criswoofi

    (@criswoofi)

    Thanks for your help! Works perfect!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Xpress Buttons and ApplePay button’ is closed to new replies.