Cart layout conflict with WooCommerce PayPal Payments

[stefan-cotitosu]

Description

When the mentioned plugin is active and the PayPal button appears on the Cart page, there is a small layout issue.

Step-by-step reproduction instructions

1. Install and activate this plugin.
2. Enable the PayPal payment method in WooCommerce settings

3. You need to set up a PayPal account to enable this and replicate the issue; adding your email and password from PayPal is enough.

Screenshots, screen recording, code snippet or Help Scout ticket

Without the PayPal button

With the PayPal button

I found it testing something for PPOM, there is no HS ticket.

Environment info

https://pastebin.com/BqztMQ8M

Is the issue you are reporting a regression

No

[HardeepAsrani]

@Codeinwp/design-team Do you guys have any input here? I don't think changing styles of PayPal button is a nice approach but feel free to correct me there or suggest alternatives. 😄

[mghenciu]

https://github.com/orgs/Codeinwp/teams/design-team Do you guys have any input here?

I think this should be the other way around, meaning that the Plugin Developer makes sure the Payment buttons have at least the same height as the Default theme buttons.

Didn't managed to test this, since it requires a PayPal account. What we can do is maybe make the Proceed to checkout button use the space on the left side, to at least not be a button on 2 lines; and test with other Core themes maybe to see if this works differently (how the payment buttons are reacting to the default theme style). If in core it looks the same way, I don't think we should bother a lot with this, imo.

[JohnPixle]

@HardeepAsrani I agree, not a good idea to force-customise the paypal button. I think it is a developer decision. I have seen that some plugins let you choose between plugin styles and theme styles for their design elements. But I think it's within the scope of plugin, not ours.

However what is within our scope, is to make sure that if there are multiple buttons - like in this case (checkout / paypal)- , they can be stacked (paypal below the checkout), instead of inline. And make sure that they have some spacing between them.

I think this will help with the layout, what you guys think?

[HardeepAsrani]

Thanks for the input. That sounds better. We can test with few themes and plugins to see how they handle it before we proceed here.