search

soflyy / oxygen-bugs-and-features

Bug Reports & Feature Requests for Oxygen
https://oxygenbuilder.com/
314 stars 29 forks source link

WooCommerce Checkout Payment methods set to display: flex #2709

Open madjedo opened 2 years ago

madjedo commented 2 years ago

In the current Oxygen 3.9 WooCommerce checkout, payment methods styling is overwritten with the display flex and flex-wrap property by default.

While flexbox is a very nice feature, the default WooCommerce payment methods styling is not using this property. This can cause issues with 3rd party payment providers that base their WooCommerce templates and styling on the current WooCommerce default CSS.

One example is Stripe. The flexbox styling is causing misalignment of the Stripe payment card icons on smaller devices.

flexbox_payment-methods_woocommerce

KittenCodes commented 2 years ago

@madjedo

One example is Stripe. The flexbox styling is causing misalignment of the Stripe payment card icons on smaller devices.

Are you able to send me a screenshot of this please?

madjedo commented 2 years ago

Hi Phe, sure:

flexbox-styling_checkout

default-styling_checkout

From the above screens you can see that with your styling, the icons align in a weird way to the bottom of the payment method name due to the flexbox styling.

I also attached a screen of the default styling where payment icons align appropriately to the right of the payment method name. You will probably also note that the default styling has some other alignment issues (the standard general crappy default woo checkout, no surprises here). I assume whoever did the Woo integration also noted this, and his/her fix to this was using flexbox when setting up your Woo integration.

Also note that Stripe since some versions back removed the payment icons from the front-end display. You need to add them back for testing purposes with this custom code:

`function add_credit_card_gateway_icons( $icon_string, $gateway_id ) { if ( 'stripe' === $gateway_id ) { $icon_string = 'Visa'; $icon_string .= 'Mastercard'; $icon_string .= 'American Express'; } return $icon_string; }

add_filter( 'woocommerce_gateway_icon', 'add_credit_card_gateway_icons', 10, 2 );`

KittenCodes commented 2 years ago

@madjedo

Thanks for the screenshots and all the info.

I've not been able to reproduce this on a clean Sandbox site - here's what I see:

2022-01-27 17_32_02-Checkout - Oxygen Sandbox

You can find the Sandbox site here: https://oxygen-q7gq3dbvs5kkl.oxygen-demo.qsandbox.me/.

Does it work for you, or do you have flex issues?

Please ignore the Stripe popup error - I've installed it, but not configured anything.

madjedo commented 2 years ago

That's so odd! I reproduced it on a clean sandbox. Aswell on a previous live site.

Just to be clear, I used this Stripe plugin: https://sv.wordpress.org/plugins/woocommerce-gateway-stripe/

I had a look at yours and I don't it think you used same. If you are able to reproduce using that plugin would be appreciated.

KittenCodes commented 2 years ago

@madjedo Unfortunately, I can't set up that plugin as I need too many details for the Stripe side of things.

If you've still got the details of the Sandbox you used, please could you open a support ticket so that we can take a look? You can open a ticket here: https://oxygenbuilder.com/support.

madjedo commented 2 years ago

@KittenCodes I don't think that will be necessary. I think you are missing my point here.

I only mentioned the flexbox styling override as an example. I have a hundred more examples. Here is one more:

Actually open up the stripe payment method list item, and you are presented with this:

Oxygen_styling_conflict_stripe

Here we see another 3 overwrites by Oxygen that are causing issues.

And I can keep on and on and on and on and on... We can sit down for hours to show you examples where your styling is in conflict with others. Like that checkbox having an opacity set to 0, really? I have reported this before. If I were you and saw this, this would have been solved immediately.

The issues I am mentioning here are simple. They exist in the first place because you are not properly testing your own tool. You need to actually use your own WooCommerce integration yourself and these issues will become apparent very quickly with a good eye.

KittenCodes commented 2 years ago

@madjedo I've been able to replicate the issue with the card icons and I've reported it internally.

Like that checkbox having an opacity set to 0, really?

This will be resolved in the next release of Oxygen's WooCommerce add-on.

madjedo commented 2 years ago

Thank you. Looking forward to it.

And just to note for the stripe icons. Stripe devs are aware of the issues with certain themes and the payment icons misaligning. Because of this reasons they reverted to a single animated icon, but later completely removed all icons, including the animated icon. Issue now is user experience and different regulations in countries/regions.

However, my point is the integration needs more work...