If add something and go to checkout here: https://sandwichspotssf.com
You will notice that the address fields display as we set them (2 fields to a row) for a fraction of a second before changing to one field per row. Why is it doing this? I can’t find any CSS or plugin that would cause this to happen.
Hi @co50,
Thanks for reaching out.
I have checked your website checkout page, but unfortunately, it does not flickered or flashed and it shows the full-width form fields. What I assume, that the width of 100% is implemented after it loads the page, and that sometimes shows the fields in 48% of width which is default width, and then after it reset it to 100% which takes a few time and causes the problem you are seeing.
Default Width:
Your website:
If you are still seeing the flash while loading, I would request you please provide any screenshot marked with the issue or any video that helps us to recognize the problem.
Thanks
OK - but where is the 100% width coming from? It’s not our custom CSS. We tested with all custom CSS site-wide removed and it still displays this way. So how do we eliminate the 100% width and/or get the checkout fields to appear as they are supposed to?
In Chrome for Windows 10, the quick flash of the correct layout before it expands is visible and repeatable.
Hello @co50,
Please edit your Billing Fields in WooCommerce > Checkout Manager and make sure that you are using form-row-first so that it will display the field to the left. You can use form-row-last to display the field to the right while using the form-row-wide will make sure that the field will display 100%.
Hope this helps.
That was already done…not the issue.
The issue is that the fields are shown correctly (2 per row as we configured them) for a fraction of a second on page load and then change to full width. This apparently seems to be a bug in your checkout editor, because nobody seems to indicate otherwise…
Hello @co50,
To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note 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.
Sure. Done.
Hi @co50,
Regretfully, the given credential is not working. Please double check and update it with the correct one.
Thank you.
Not sure what happened there but I’ve changed the password in the secure note and tested it - you should be able to login.
Hey Greg,
What happens is the Stack’s CSS loads first (2 columns default) then the Woo Checkout Editor’s CSS (1 column via the form-row-wide class. The Woo Checkout Editor CSS needs to load first in order for the 2 columns to not take effect.
Regretfully, there is no solution to that but to reorder the loading of CSS. It is WordPress that loads the theme’s CSS first then the plugins.
I’ll submit this in our issue tracker to see if our development team could come up with a solution to this but using a 3rd party plugin or have a personal developer re-order the loading of CSS would be the solution. You can look up in the WordPress repo or premium WP marketplaces for such a plugin.
Thank you for understanding.
I think you got the order wrong (we WANT the two columns) but cool - yeah it looks like your checkout editor plugin is only half useful right now - you can change the order of the fields (which not too many would do anyway) but the main purpose, getting two fields to a line, doesn’t work. Hopefully they prioritize the fix. Thanks.
-Greg
Hi Greg,
The issue was already submitted to our issue tracker and we don’t have any ETA for that issue. I suggest that you check the updates from time to time.
Thank you for understanding and please bear with us.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
