Home › Forums › WoodMart support forum › Checkout – Stripe style
Checkout – Stripe style
- This topic has 10 replies, 2 voices, and was last updated 9 months, 4 weeks ago by Bogdan Donovan.
-
AuthorPosts
-
December 14, 2023 at 1:20 pm #521571
WoodyPParticipantHello,
checkout is also changing Stripe style.
It could also be fine, but it turns out to be very narrow.This would also show Apple Pay or Google Pay based on your devide or browser.
Maybe it’s changing these views too, because I can’t see either Apple Pay or Google Pay. I tried on Safari, Crome browsers and on my phone.
Instead they are shown in the cart without problems.How to resolve the style on all payment cases?
Or how is it possible not to change the Stripe style?Thank you
December 14, 2023 at 2:15 pm #521596
WoodyPParticipantHello
I found other style errors when activating Paypal.The PayPal button is not full width, or centered.
The “empty fields” message that appears above is beyond the layout.However, with Apple Pay via Paypal it works and is visible, the button has the right width and the message is correctly displayed.
Watch the video.December 14, 2023 at 6:53 pm #521753
Bogdan DonovanKeymasterHi,
1. Stripe payment form. In the one of recent Stripe updates, plugin developers guided by security needs moved all payment form inside
iframe
(screenshot https://prnt.sc/FCS9HbH2K1A8). Unfortunately, it’s impossible to style content located inside of iframe using WordPress theme, because all content located in iframe are hosted on an external server different from your site (https://prnt.sc/htPWEHCKAvTu).2. PayPal button width. Same as the payment form, PayPal button is located inside of iframe (https://prnt.sc/duoxlOFLOQ4b) which has its own style that adds maximum width to the button equal to 750px (https://prnt.sc/dF1a_NcIxibn). Unfortunately, this button width is unreachable for styles outside of iframe. In this situation, the easiest way to fix this issue is to make the other buttons’ width equal to the PayPal button by adding the following custom code snippet to the Custom CSS area in Theme Settings:
.woocommerce-checkout .ppc-button-wrapper, .place-order > button { max-width: 750px; margin-inline: auto; }
3. Notice width. Try to add the following custom code snippet to the Custom CSS area in Theme Settings to equalize notices width:
.woocommerce-checkout form > .woocommerce-error { max-width: 695px; margin-inline: auto; }
Kind Regards
December 14, 2023 at 7:45 pm #521764
WoodyPParticipantHello,
Thank you for your answer.What I mean is that there is something about the theme or style of the page that is influencing Stripe’s style anyway, and perhaps it is also annoying Apple Pay, which is not shown on this page, but in the cart it is.
As you can see on this page, the style should be different with higher fields.
https://woo.com/document/stripe/#new-checkout-experienceI also attach a screenshot taken from another site I created,
it looks very similar to the screen visible in the link.
https://www.dropbox.com/scl/fi/e9xmyr5lxibu7zzm69t5c/checkout-STRIPE.png?rlkey=pkvlb4k1c8io1mj8c0jmb8qgw&dl=0Thank you
December 15, 2023 at 10:01 am #521847
Bogdan DonovanKeymasterCould you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand is it our theme issue or not?
Regards
December 15, 2023 at 10:45 am #521873
WoodyPParticipantHello Bogdan,
here is a video where you can see how it is shown with the Hello theme, but you can try it with other themes.
In the video I show you how Stripe is displayed in the checkout, on Crome and on Safari.I hope it’s clear now
Thank youDecember 15, 2023 at 1:09 pm #521939
Bogdan DonovanKeymaster1. Stripe payment form. We have checked how the Stripe plugin works with default themes by checking themes’ input styles and applying them to iframe content. Since the plugin checks parent theme styles this issue cannot be fixed by simple custom code, but we will fix this in the next 7.4 theme update which will be released in the next few weeks.
2. PayPal button width. Unfortunately, the same solution can’t be applied to the PayPal button because its button is limited by a max-width equal to 750px by plugin styles located inside the iframe. We have checked similar issues (link https://wordpress.org/support/topic/button-layout-issue/) and found that plugin support recommends a similar solution related to the button centering as we suggested in the previous reply.
Kind Regards
December 15, 2023 at 3:05 pm #521980
WoodyPParticipantHi Bogdan,
okay thanks, I’m happy to have reported something useful, and above all that you were able to reproduce it. 😉
I’m waiting for the updateThank you
December 15, 2023 at 5:21 pm #522039
Bogdan DonovanKeymasterYou are welcome!
February 17, 2024 at 12:05 am #540860
WoodyPParticipantHi,
It’s been a while, do you know when it can be resolved?Thank you
February 19, 2024 at 10:37 am #541263
Bogdan DonovanKeymasterHi,
The issue with the form styles should have been fixed in the 7.4 update, if it hasn’t, please provide links to the site with the problem so we can investigate the issue further.
Kind Regards
-
AuthorPosts
- You must be logged in to create new topics. Login / Register