Theme impacting with WooCommerce checkout

[AshleyF]

Hi,

The formatting of the WooCommerce checkout page seems to be inflicted by the X Theme I think. I am not totally sure how to edit the form label because it’s being over-ridden by the theme to 13px so becomes a very small box to enter card details.

[AshleyF]

I have tweaked the layout a bit but I cant edit the card number box.

By default I think it’s meant to be something like this (from woocommerce demo)

Mine looks like this:

[ruenel]

Hello Ashley,

Thanks for writing in! The font size of 13 pixels is coming from the Stripe plugin. There might be a setting to change the font size. I would not be sure where to find that setting. I would require to be log in and figure out the cause of the issue for you. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[AshleyF]

Thank you I have updated the secure note.

[ruenel]

Hey Ashley,

It seems that your Stripe plugin is loading an iFrame in that area.

Be advised that any styling applied to the elements inside the iFrame cannot be overridden. Try to temporarily deactivate the plugin and see the changes.

Thanks.

[AshleyF]

Thank you for taking a look at this for me. The only thing I would ask is if we are sure this is not a theme conflict somewhere. Because if I enable the default Wordpress theme the plugin is styled very differently with larger boxes. See screenshot.

[ruenel]

Hello Ashley,

The WooCommerce Gateway Stripe plugin is loading this iFrame:

<iframe name="__privateStripeFrame2619" frameborder="0" allowtransparency="true" scrolling="no" role="presentation" allow="payment *; publickey-credentials-get *" src="https://js.stripe.com/v3/elements-inner-payment-d7a16fc3dac481dbfae5ce9218e21a87.html#wait=true&amp;rtl=false&amp;publicOptions[fields][billingDetails][name]=never&amp;publicOptions[fields][billingDetails][phone]=auto&amp;publicOptions[fields][billingDetails][email]=never&amp;publicOptions[fields][billingDetails][address][country]=never&amp;publicOptions[fields][billingDetails][address][postalCode]=never&amp;publicOptions[fields][billingDetails][address][state]=never&amp;publicOptions[fields][billingDetails][address][city]=never&amp;publicOptions[fields][billingDetails][address][line1]=never&amp;publicOptions[fields][billingDetails][address][line2]=never&amp;publicOptions[terms][card]=never&amp;publicOptions[wallets][applePay]=never&amp;publicOptions[wallets][googlePay]=never&amp;locale=en-GB&amp;elementsInitSource=stripe.elements&amp;componentName=payment&amp;keyMode=live&amp;apiKey=pk_live_51NzFFEDHlEEmUokRZDEgM0A3erIbkMtbd0UzcYd1WqgrLBv4I5qqFdOdfyIpyVIEf4mfLsQ1gRlOjG0eFyMlAKM300YDoIlMVH&amp;referrer=https%3A%2F%2Fwww.ocduk.org%2Fcheckout%2F&amp;controllerId=__privateStripeController2616" title="Secure payment input frame" style="border: 0px !important; margin: -4px; padding: 0px !important; width: calc(100% + 8px); min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; transform: translate(0px) !important; color-scheme: light only !important; height: 60.6484px; opacity: 1; transition: height 0.35s, opacity 0.4s 0.1s;"></iframe>

I would recommend that you create a staging site so we can troubleshoot thoroughly without affecting the live site.

Thank you.