Button sizes on cart & checkout pages

  • Resolved joaopegb

    (@joaopegb)


    4 years, 2 months ago

    Hi,

    I’m having a bit of problem with the responsive PayPal buttons in my cart and checkout pages.

    I want to keep their minimum height at 45px but what happens is that because of the default media queries they decrease size automatically on mobile screen sizes below 400px width.

    Is there any way to stop this and make sure they don’t go below 45px?

    They become way too small as the minimum recommended tappable area on mobile devices is 44px.

    Thanks in advance,

    Jo?o

    Some images to illustrate: https://docs.google.com/presentation/d/1wGubkSJgWFKB3zQqKOZBuWaFCHx9WzEsVfTFKFBtmRg/edit?usp=sharing

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter joaopegb

    (@joaopegb)

    is there any support available for this?

    Hi @joaopegb ,

    I apologize for the delayed response. The button sizing is set on the element itself in the button received from PayPal.

    It may be able to be updated via some theme code, but this is a fairly complex development topic. I’ll leave it open for a bit to see if anyone is able to chime in to help you out.

    I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

    You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

    Thread Starter joaopegb

    (@joaopegb)

    isn’t there any way to override the default media queries using some CSS?

    Thread Starter joaopegb

    (@joaopegb)

    nothing?

    Hi @joaopegb ,

    Because the button comes inside an iframe, Custom CSS can’t override the sizing in that area.

    You may be able to get some developer assistance from the WooCommerce Facebook group or the WooCommerce Community Slack, but making changes to that iFrame will be tricky.

    Thread Starter joaopegb

    (@joaopegb)

    Ok, thanks for explaining.

    Another thing, how can I add the PayPal Express Checkout button as a fast checkout option (similar to Apple Pay – screenshot ) in a way that the customer doesn’t have to insert all billing details in the checkout page?

    Similar to what happens in the product page.

    Because currently (in checkout page) if the customer selects the PayPal payment method without filling all required info there are error messages displayed for all the missing fields (screenshot).

    Which undermines the purpose of PayPal seamless and fast checkout…

    The PayPal express buttons should work without requiring that in other areas of your site, like the cart and product pages.

    I’m going to check with our developers and see if the same behavior can be added in checkout, as well.

    Also, I found out that the CSS issue with styling the buttons has been identified to be fixed. There’s an open issue you can monitor here for updates.

    I’ll let you know what I find out about that billing address.

    Thread Starter joaopegb

    (@joaopegb)

    Thanks, much appreciated.

    Thread Starter joaopegb

    (@joaopegb)

    Did you got any input from the developers regarding the express checkout behaviour in the checkout page?

    It’s exactly the same thing that PayPal integration in Shopify does.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Button sizes on cart & checkout pages’ is closed to new replies.