• Hi

    Layout 1
    https://ibb.co/7tR0XYwq
    Layout 2
    https://ibb.co/M5ZVsm89

    As you can see, there is 2 different layout which are:

    1. Layout 1: The card number, expired date, and security code is inline
    2. Layout 2: The card number is on the top but the expired date and security code on the bottom. It’s generated in 2 row

    Because the fields is generated by the stripe API it self, I just wondering, can we control it to make it consistent? Also I have try to inspect this is because the field is set to responsive class, but I some how on refresh the layout not consistent.

    Please kindly help,

    Thank you

Viewing 1 replies (of 1 total)
  • Plugin Support LovingBro (woo-hc)

    (@lovingbro)

    Hi @kiky1991,

    I can see what you mean with the two different layouts, that inconsistency in how the Stripe fields render can definitely be confusing, and you are right to look into how it is being generated.

    The key thing here is that these fields are rendered using Stripe Elements, which are controlled by Stripe’s own JavaScript and are designed to be responsive. This means the layout can automatically adjust based on factors like container width, screen size, and sometimes even timing during page load, which is why you may notice it changing on refresh.

    At the moment, WooCommerce itself does not provide a direct way to force a fixed layout for those fields, since the structure is handled by Stripe. However, here are a few things you can check or try:

    • Ensure there are no CSS rules from your theme or custom styles affecting the Stripe container width or flex behavior
    • Test with a default theme like Storefront to see if the inconsistency persists
    • Check if any optimization plugins, caching, or JS minification could be affecting how Stripe Elements initializes
    • Make sure your checkout container has a consistent width across loads

    If you are looking to enforce a very specific layout, that would typically require custom CSS or JS targeting the Stripe Elements wrapper, though this falls outside standard plugin support.

    You can also review how Stripe Elements behaves and what customization options are available here: https://docs.stripe.com/payments/elements

    If you can share your site URL or a quick screen recording via https://snipboard.io, it would help take a closer look at what might be influencing the layout on your setup.

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.