Skip Navigation

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client is experiencing an issue where the HTML structure is not consistent between the original and translated pages when using WPML's Advanced Translation Editor (ATE).
Solution:
We conducted a test using the provided HTML markup and did not encounter any issues with the Custom HTML widget after making sure that the original HTML is formated properly. There is an unexpected whitespace in the original HTML markup that caused the issue.

If this solution does not resolve your issue, or if it seems outdated or irrelevant to your case, please open a new support ticket. We also highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. For further assistance, you can contact us directly through the WPML support forum.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic contains 1 reply, has 0 voices.

Last updated by Andreas W. 1 month, 1 week ago.

Assisted by: Andreas W..

Author Posts
November 14, 2024 at 12:57 pm #16402626

bjornL-7

Background of the issue:
I am trying to translate a page using WPML's ATE on my website. The default language page is hidden link, and the translated language page is hidden link. I expected the HTML structure to remain consistent between the original and translated pages. Here is the expected HTML code:

<div class="toggle custom-toggle-container"> <label id="custom-toggle-monthly-label" class="custom-toggle-label">Monthly </label> <div class="toggle-btn"> <label class="sub" id="sub" for="checkbox"> <div class="circle"></div> </label> </div> <label id="custom-toggle-annual-label" class="custom-toggle-label disabled"> Annual <span id="custom-toggle-annual-discount">(Save 30%)</span></label> </div>

.

Symptoms:
ATE adds unwanted HTML markup ( and

tags) to the translated version, which breaks the layout. The resulting HTML is:

<div class="toggle custom-toggle-container"> <label id="custom-toggle-monthly-label" class="custom-toggle-label">Monthly </label><p></p> <div class="toggle-btn"> <br> <label class="sub" id="sub" for="checkbox"><p></p> <div class="circle"></div> <p> </p></label></div> <p> <label id="custom-toggle-annual-label" class="custom-toggle-label disabled"> Annual <span id="custom-toggle-annual-discount">(Save 30%)</span></label> </p></div>

.

Questions:
Why does ATE add unwanted HTML markup to the translated page?
How can I prevent ATE from altering the HTML structure during translation?

November 18, 2024 at 10:08 pm #16416780

Andreas W.
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

Hello,

I ran a test using your markup and I can not confirm any issue when usign a post with a Custom HTML widget. Take note that I made sure first that this markup was perfectly formated:

One-Click-Login:
hidden link

Could you please try to recreate the issue on this test site and then get back to me?

Best regards
Andreas