Incomplete display of “woocommerce-error” box on checkout page

Hi @bahram021,

I tried to replicate the issue on my test site but wasn’t able to. To better understand the problem, could you share a link to your site so I can test it there? Additionally, please provide your System Status Report, which you can find by going to WooCommerce > Status in your WordPress dashboard. From there, click on the “Get System Report” button to generate and view the detailed report.

hi @mosesmedh

https://prebiotic.ir/checkout/

This bug has been present since version 9.4.3.
Ever since the error text was added below each field, the red WooCommerce error box has been messed up on some RTL sites.
I downgraded to version 9.4.3 and the error was fixed.

Please fix this problem in the next update.

Hi there!

Thank you for sharing the checkout page URL. I’ve checked your site, and currently, I can see the error notice appearing as expected on your site: screenshot. Just to verify, have you downgraded the WooCommerce plugin again?

If yes, could you please create a staging site, deactivate all plugins except WooCommerce, and check if you still face the same issue? For more details on how to perform a conflict test, you can refer to this article:
How to Test for Plugin and Theme Conflicts

I have set the Persian language on my test site and I’m not able to replicate the issue using the latest version, which indicates the issue might be due to a plugin conflict.

If you still face the same issue, could you please share the staging site URL so we can further investigate? Kindly keep all plugins deactivated on the staging site and activate the default WordPress theme, such as Storefront or Twenty Twenty-Four.

Let me know how it goes!

Hello @shahzeenfarooq
Yes, it is currently version 9.4.3, which is fine.
I disabled each plugin and tested it. ?screenshot.
I returned the function file to the standard state and tested it.
I removed all the custom CSS and tested it again.
I even tested it with another template.
I cleared the cache several times and even checked the error log file.
Unfortunately, in all cases there was a problem with incomplete display. ?screenshot.
Because the site has a high traffic, I cannot keep it on the default template for a long time. I hope you understand my situation, thank you

Hi @bahram021,

I understand how frustrating this situation must be, and I can see you’ve put in a lot of effort to resolve it without success. As @shahzeenfarooq mentioned earlier, the issue seems to be specific to your setup.

I tested the checkout on multiple browsers, and the errors displayed correctly.

This suggests that the issue is not with your site but rather with your browser or PC. Could you try using a different browser or open your site in incognito mode to see if the issue persists on your end?

@mosesmedh

Yes, it is displayed correctly because I have already downgraded to version 9.4.3.

Hi there!

To assist you further, I would like to identify which CSS code or settings might be causing the issue, and for that, I need to replicate the issue on your staging site. Could you please create a staging site for testing purposes? On the staging site, deactivate all plugins except WooCommerce, update WooCommerce to the latest version, and share the staging site URL with me.

You can easily create a staging site using the WP Staging plugin. Creating a staging site will not affect your live site. Once the staging site is set up, please ensure you:

• Update WordPress on the staging site.
• Deactivate all other plugins.
• Activate the Twenty Twenty-Five or Storefront theme.

Let me know once it’s ready!

@shahzeenfarooq

hi How can I hide the red box above completely and display the error below the incomplete fields?

Hi @bahram021

hi How can I hide the red box above completely and display the error below the incomplete fields?

I see you’d like to modify the form notifications. For this specific inquiry, I’d suggest contacting your theme developer for help with customizations. It looks like you’re using the Jannah theme, correct?

Just to note, themes often have modified templates that control how parts of the site work, like how it shows form notifications. They may also need to update their code when a plugin they support gets updates. That’s why we recommend reaching out to the theme developers for these types of inquiries, as customizations are a bit beyond our scope of support.

Lastly, if the form notifications look different than before the update, check if your theme has any pending updates. Updating the theme might fix the issue. (Just make sure to save a backup before updating).

@reynierc

hi. Please check the red box issue on RTL sites. I am sure this bug occurred after version 9.4.3 and the addition of the error below each field.

Hi @bahram021,

We’re not entirely certain this is a general bug, as we’ve been unable to replicate the issue. To assist you further, please follow the steps suggested by @shahzeenfarooq and share a link to your staging site.

This will allow us to troubleshoot the issue directly on your staging site and better understand the cause.

Additionally, I’ve reviewed the checkout page and noticed that the notice bar seems to be hidden. Could you confirm if that’s intentional?