Adjust the Width of the Google Pay / Apple Pay / Express Checkout Button

Hi there @chrisalton11 ??

Adjust the Width of the Google Pay / Apple Pay / Express Checkout Button

Thanks for reaching out! WooCommerce Payments supports a few options for you to customize your express checkout button. For more on this, see the screenshot directly linked at the related section in the documentation.

Upon investigation the product linked you shared here with us, I was not able to see any express chekcout options (G Pay button). Can you please share a screenshot of the settings, under WooCommerce Payments > Apple Pay / Google Pay? That will help us understand the issue better. Here’s how to make a screenshot: https://wordpress.com/support/make-a-screenshot/

Also, could you please share a copy of your site’s System Status? You can find it via WooCommerce > Status. Select Get system report and then Copy for support.?

Additionally, could you also provide us with the fatal error logs (if any) under WooCommerce > Status > Logs.

Once you’ve copied each, you can either paste them in your response here, or use https://pastebin.com/ for pasting it there and sharing it with us.

Looking forward to hearing from you!

Hi Pepe,

Thanks for your help. I’m including a WeTransfer link with all the necessary documents and screenshots: https://we.tl/t-97BQ8SKnrW

One of the screenshots shows how the original product that I linked shows up for me. Not sure why the Gpay button didn’t show up for you. For me, it doesn’t show up on mobile but always shows up on desktop. Never seen an ApplePay button show up on either device, but I do believe I have it enabled.

Chris

Hello,

Is there a way to customize the size (width) of the google pay button?

Can you please send us a screenshot of your goal? I mean, would you like to make the button wider? Smaller? Please clarify. Thanks.

Hi Igor,

I’d like to make the button smaller (less wide) if possible. It currently takes up more than half the page. (the full width of the container that it’s in on the product pages)

Let me know if this is possible. Thanks,
Chris

Hello,

This is an example, I am changing the button width to be 60%. You can add your own width, You can add this CSS code under WP-Admin > Appearance > Additional CSS.

.GooglePayButton{
    width: 60% !important   
}

Link to image: https://snipboard.io/yz1JMS.jpg

Is this what you are looking for? Sorry for asking again, but the screenshot you attached is expired, so I was unable to check it again. Let us know if there are any questions.

• This reply was modified 2 years ago by Igor H.

Hi Igor,

That selector didn’t work for me but I figured out something that did. Posting the CSS here below in case anyone in the future finds it helpful,

#wcpay-payment-request-wrapper {
width: 36% !important;
}

#wcpay-payment-request-button-separator {
margin-left: 13%;
text-align: left !important;
}

This should work for people using WooCommerce Payments to process transactions on their website.

Thanks for your time,
Chris

Awesome, @chrisalton11 glad you were able to find the correct solution.

If you have any new questions, please create a new ticket.

Cheers!