Aligning Express Checkout Buttons Above PayPal on Single Product Page

  • Resolved dreamwalker22

    (@dreamwalker22)


    1 week ago

    Hi,

    I’m trying to position the Express Checkout buttons (Apple Pay, Google Pay) above the PayPal button on the single product page of my WooCommerce store.

    Right now it looks like this:

    Desktop: https://imgur.com/vSQXffw

    Mobile: https://imgur.com/PMW7L5L


    Could anyone provide guidance on how to properly align the Express Checkout buttons above the PayPal button, ensuring they appear consistently sized and aligned on all devices?

    Any advice on PHP, CSS, or settings within Elementor Pro and Astra that might help would be greatly appreciated!

    Thank you!

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

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

    (@mrclayton)

    Hi @dreamwalker22

    This alignment issue occurs when the parent container utilizes flexbox properties without flex-wrap enabled.

    I notice you’ve already transitioned to an alternative payment processing plugin. While I understand the styling concerns, I recommend carefully evaluating payment gateway decisions beyond cosmetic factors, as this particular layout could be resolved with a simple CSS modification.

    Kind Regards

    Thread Starter dreamwalker22

    (@dreamwalker22)

    Hi @mrclayton

    Just to clarify, the Payment Plugins for Stripe is the plugin I was referring to.
    And it’s actually the plugin I’m using for Stripe payments on my site, along with a PayPal plugin for additional payment options.

    Plugin: https://imgur.com/Ouduk4T

    I’m a bit confused about the mention of an “alternative payment processing plugin” in your response. Could you clarify what you meant by that?

    Plugin Author Payment Plugins

    (@mrclayton)

    Hi @dreamwalker22

    When I reviewed your site you had the following 2 plugins enabled on your product page:

    1. https://www.ads-software.com/plugins/woocommerce-gateway-stripe/
    2. https://www.ads-software.com/plugins/woocommerce-paypal-payments/

    I can now see you have our Stripe plugin enabled. Here is some simple CSS to place all buttons on their own row:

    .woocommerce form.cart{
        flex-wrap: wrap;
    }

    Not sure if the PayPal plugin supports it, but our PayPal plugin has a button size option so you can match the PayPal button height with other express payment buttons on your site.

    Kind Regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.