Woocommerce notice on checkout breaking when a woocommerce vat field is added.

Hi guys,

So we are having a small problem with our checkout for with the error messages for a added vat field. When there is a vat error (Such as invalid vat) the message is not being deployed properly and is breaking the page. Please check the picture on the following link or the file attached: https://v2.endeavorwebs.com/wp-content/uploads/2019/01/EW-EU-VAT-PLUGIN-ERROR-270119-01.png

What is happening is that the error message for the vat field alone, is not triggering the normal woocommerce checkout message ‘notice-group’ and it is not getting the right css info. When other messages are compile, the ‘woocommerce-notice-group’ correct css is deployed and everything works.

So we found, that the vat field alone doesn’t bring the class ‘.woocommerce-NoticeGroup-checkout’ alive as suggested, and the missing css ‘flex-basis: 100%’ is missing to align the vat message correctly. It works if you add the ‘’flex-basis 100%’’ in the html, but the checkout page is a woocommerce built page. We tried to include an extra css ‘flex-basis 100%’ for the ‘.woocommerce-NoticeGroup-checkout’ but is not working as the css class is not coming alive for the VAT error message to begin with, so we need some ideas please.

We also have inquired with the plugin guys and they mention that the cause is likely to be the theme notice process or that the “notices added through the native wc_add_notice() are not properly rendered by the theme template.” refer to this topic: (https://docs.woocommerce.com/wc-apidocs/function-wc_add_notice.html )

So the problem seems simple to resolve, as if we only add a ‘flex-basis: 100%’ on the class ‘.woocommerce-NoticeGroup-checkout’ fixes it, however we don’t know how to get it done yet practically…

Can you help?

Regards

Attachments:

You must be logged in to view attached files.

Hi,

Please, send us a step by step instruction on how exactly we can reproduce the problem. Currently, we can’t get this message at all.

Regards

HI there,

You just need to put couple numbers on the vat field, and move the mouse to another field, the vat field FIES system will trigger an error.

We don’t see this error https://gyazo.com/6aadcbcce7acf34e229c7cfff9cc19be

Hi there,

We have the same error in 3 browsers, chrome, Firefox and explorer. It seems that is trigger by the the user IP, perhaps in Western Europe where VAT is due. If you are in U the VAT calculation is disregarded.
Please check the video for the error.
Thank you

https://v2.endeavorwebs.com/wp-content/uploads/2019/01/EW-Checkout-error-vat-message-280119.mp4

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

form.checkout .woocommerce-NoticeGroup {
      padding-left: 15px;
   padding-right: 15px;
   width: 100%;
   max-width: 100%;
   -ms-flex-preferred-size: 100%;
   flex-basis: 100%;
}

We will check and fix it in our theme update.

Perfet ! IT worked nicely ! Thank you for cracking it for us so fast!
All the best!!

You are welcome.

[Author]

Posts