Xpress Buttons and ApplePay button

Resolved criswoofi
(@criswoofi)

2 years, 10 months 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 Clayton R
(@mrclayton)

2 years, 10 months ago
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)

2 years, 10 months ago

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 Clayton R
(@mrclayton)

2 years, 10 months ago
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
- This reply was modified 2 years, 10 months ago by Clayton R.
Thread Starter criswoofi
(@criswoofi)

2 years, 10 months ago

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.

Tags