Hi there!
Thank you for bringing this to our attention. I have tried to replicate the issue on my end, and everything appears to be working correctly the styling on the Order Pay page looks fine from my side.
To assist you further, could you please share the Order Pay page link where you are experiencing the styling issue? You may create a dummy order for testing purposes and share that link with us.
Additionally, please share your System Status Report, which you can find via WooCommerce > Status.
Please use https://pastebin.com/ or https://gist.github.com/ and share a link to that paste in reply here. Once we have more information, we’ll be able to assist you further.
Thread Starter
dcuryk
(@dcuryk)
Hi
Thank you for taking the time to respond.
Here’s the system status.
And there’s a sample order in the last line.
Thanks!
Hi there!
Thank you for bringing this to our attention. I’ve checked your report and can see that the theme you’re using is overriding the Order Pay page template, which may be causing the issue.
To address this:
- Please review the Templates section in your WooCommerce System Status Report to see which templates need to be updated.
- If you’re unsure how to update the templates, we recommend contacting your theme support team and asking them to update the overridden templates.
To determine whether the template is causing the issue or if something else is responsible, I suggest temporarily activating a default theme like Twenty Twenty-One on your site and checking if the issue still occurs.
- You can perform this test on a staging site so your live site remains unaffected.
- For creating a staging site, you can use your hosting provider’s tool, if available, or a staging plugin.
Additionally, I noticed that the Custom Checkout option is disabled. We recommend enabling this option. You can enable it by following these steps:
- In your store’s WP Admin dashboard, go to WooCommerce > Settings > Payments > Stripe > Settings.
- Scroll to the Advanced Settings section.
- Check the box for “Dynamically display the most relevant payment methods you’ve enabled.”
- Choose a Layout option.
- Click Save Changes at the bottom.
Let us know what you find.
Thread Starter
dcuryk
(@dcuryk)
Hi!
I found a solution.
TLDR: Added css rules for #wc-stripe-hidden-input.
In detail:
With the help of Claude, who was able to read the minified JS files from the plugin I got to understand what the plugin was doing to style the elements:
The plugin tries to replicate the styles from the current theme. In order to do this it looks for an existing field. In the checkout page, this field is #billing_first_name, and in order pay it is#wc-stripe-hidden-style-input. In this case, it then clones the element, renames it to #wc-stripe-hidden-input, moves it to a different location inside #payment and extracts the computed styles from there.
The issue was that the css rules for inputs in the order pay page in my theme were too specific and did not apply to all elements inside #payment, so the cloned element had no styles.
The solution is to make broader css rules or have specific css rules for #wc-stripe-hidden-input.
-
This reply was modified 2 months ago by
dcuryk.
Hi there,
That’s a great find thanks a lot for taking the time to investigate and share such a detailed explanation of the root cause and solution.
Your breakdown of how the Stripe plugin clones and uses #wc-stripe-hidden-input to inherit styles is really helpful, and it makes sense that highly specific CSS rules on the order pay page would prevent those styles from being applied correctly.
Adding broader CSS rules or explicitly targeting #wc-stripe-hidden-input is a solid solution, and it’s great to hear that this resolved the issue on your end.
This insight could definitely help others facing similar behavior, especially when dealing with custom themes and Stripe styling.
Before you go, If you felt supported through the issue, a quick review on ww.wp.xz.cn would mean a lot. It helps others feel confident choosing it, knowing there’s help when they need it.
Leave a review here: https://ww.wp.xz.cn/support/plugin/woocommerce-gateway-stripe/reviews/#new-post
