Very strange error in Pro

[timschouwink]

Hi,

Im trying to use translation tool ‘Weglot’ in combination with Pro. It’s giving me very strange errors and I really cant find out what is happening here. When changing language on this url (see switcher in the bottom of the screen): https://nlbunker501-byom.savviihq.com/product-category/airsoft-guns/

Notice that the layout of the page returns some serious errors (also see screenshot).

I have tried disabling all plugins, did a fresh install for Pro, activated Pro instead of child theme and tried to erase all kinds of errors upon validating Pro. Nothings seems to help. When enabling standard WP theme all is fine…

How can ut be that Pro seems to be breaking down the site upon language change. Something to do with language parameter ‘/nl/’ ?

I really hope you can help me out.

Thanks!

[christian]

Hey Tim,

I’ve tried Weglot in my test site and it does not cause front-end issues. I’m sorry but I’m not sure how Weglot works but I’m suspecting HTML syntax errors are causing the broken Weglot front-end translation.

You have broken HTML in Pro > Theme Options > Header > Topbar Content.

There are also unclosed p tags in Theme Options > Footer > Footer Content.

Please try correcting all broken HTML in your site and test if the issue persists. Before posting or inserting HTML in your site, I’d recommend that you pasted them first in tools like https://htmlhint.io/. That will warn you of errors so you could correct them.

Thanks.

[timschouwink]

@christian_y

Thanks for pointing this out. I have cleared these and some other errors. The problem is still there…
I think it may have something to do with these errors (see screenshot).

I cannot find out where to correct this. Any ideas?

Thanks!

[basanta]

Hi Tim,

Can you please confirm if the site is down? I am not able to. open the site.

According to the screenshot you have shared, look like this also some HTML tag error. To confirm exactly we need to check the site but unfortunately, the site is down.

Thanks

[timschouwink]

Hi Basanta,

Sorry we had to deploy a new staging environment.

The same errors are in the live site : https://bunker501.nl/nl/product-category/airsoft-guns/

Thanks!

[basanta]

Hi Tim,

I can see this is the same HTML syntax error causing the issue. The Weglot plugin removing few HTML closing tags when it getting translated.

The last product HTML doesn’t have closing tags.

I would suggest you to please contact Weglot support, they might have a solution for it.

Thanks

[timschouwink]

Hi @basanta

I have forwarded your reply to Weglot and this is their reply:

Hi,

Thanks a lot for your message.

I’ve sent your case to your developers’ team.

It seems that you have HTML issues in your original content.

Browsers are fixing issues displaying the content so that’s why your original version seems fine.

The footer seems to be into the last product div.
Removing the last product, the footer become inside the new last product and so on.
Removing all the products from the page, and the footer is perfect.

The products are tags issues (li a div and /a /div /li) between other issues which can create this HTML break in the translated language.

Also, in the products, you have a , a then you should have the but there is the before the (instance : line 219 of your website source code)

We will not be able to fix the translated version as the HTML will not be clean in the original version.

Let me know if you need any further information,

Keep me posted,

Regards,

Christophe

---

Hope this helps us/you.

Let me know…

Thanks

[rad]

Hi Tim,

As pointed out in the screenshots, it’s due to your malformed content. And it can be verified through validation like this

Let’s start with this,

Please view your page’s source code by right clicking and hit View page source from the context menu.

Then hit CTRL + F (or COMMAND + F) and search for IOVAL BBS?</u></font

That’s one of the possible cause which is added in your header bar text element. And instead of this

<u><font color="white">BIOVAL BBS?</u></font>

it should be like this

<u><font color="white">BIOVAL BBS?</font></u>

The opening and closing should be paired together like

<el_1> ............ <el_2>inner content</el_2> ............ </el_1>

and not this

<el_1> ............ <el_2> ............ </el_1></el_2>

Next error is this

Searching it from the source code points me to this content from your header bar text element too

<p style="text-align: center;"><font color="red">KERST SALE!</font> ALLE BESTELLINGEN VANAF €300 = 6% | VAN €500 = 10% | VAN €1000 = 15%</a></p>

You have added </a> without <a>, so it should be removed and the result should be like this

<p style="text-align: center;"><font color="red">KERST SALE!</font> ALLE BESTELLINGEN VANAF €300 = 6% | VAN €500 = 10% | VAN €1000 = 15%</p>

And there are more, the error you have to fix are always related to stray element, tag that violates nesting rules, and unclosed elements.

Please fix all of them and test it again, you should see all the element errors here https://validator.w3.org/nu/?doc=https%3A%2F%2Fbunker501.nl%2Fnl%2Fproduct-category%2Fairsoft-guns%2F

Thanks!

[timschouwink]

Hi @Rad

You are the best. I just couldn’t find it. Happen to be old header bars which where placed long time ago and were just set on hide (with css class).

It all works now. thanks so much for helping me into the right direction!

Have a great weekend!

Tim

[rad]

You’re most welcome!