This thread is resolved. Here is a description of the problem and solution.
Problem: The client was facing an issue where the text in the first level of a two-level list was not appearing translated on the front-end in WPML, despite being translated in the WPML translation editor. The issue was temporarily resolved by adding a colon at the end of the first level, but this was not a satisfactory solution. Solution: We discovered that the problem was related to incorrect HTML structure within the list. To resolve this, we recommend: 1. Switch to the code editor in your WordPress editor. 2. Copy the entire HTML structure of the problematic list. 3. Use ChatGPT or a similar tool to check and correct the HTML structure. 4. Replace the corrected HTML and save the changes. This approach should ensure that the translations display correctly without needing to add unnecessary punctuation.
If this solution does not resolve your issue, or if it seems outdated or irrelevant to your case, we 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. Additionally, you can open a new support ticket for further assistance at 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.
Background of the issue:
I am trying to translate lists with two levels on some pages. Even though the text is translated in the WPML translation editor, the translation doesn't appear on the front-end for the text in the first level of the list. I purged the cache and made some edits to the page, but it didn't work. The only thing that worked was adding a colon at the end of the first level/before the second level in the original language. Link to a page where the issue could be seen: hidden link
Symptoms:
The text in the first level of the list was not translated on the front-end until I added a colon at the end of the first level/before the second level in the original language. Now it works because I added the colon, but before I did that, the text was not translated (Steering Committee tab).
Questions:
Why does adding a colon affect the translation visibility on the front-end?
How can I ensure translations appear without needing to add unnecessary punctuation?
I’ve reviewed your page here: hidden link. However, I’m not entirely clear on what you mean by “first level/before the second level in the original language.” Could you please clarify? If possible, you can highlight the area in question with a screenshot or a screen recording. You’re welcome to use a free tool like Loom: hidden link for this purpose.
In the image attached, if I don't put the colons highlighted in yellow, the sentence preceding that colon is not translated in the other language on the frontend, even though it is in the WPML ATE. This only happens with list that have 2 levels. I haven't tested it with lists with more than 2 levels.
Thanks for your reply. I will have to test it from my end. Therefore, I will require temporary access (WP-Admin and FTP) to a test site where the problem has been replicated, if possible. This will enable me to provide better assistance and determine if any configurations need to be modified.
Please note that it is important to have a backup for security purposes and to prevent any potential data loss. You can use the UpdraftPlus plugin (https://wordpress.org/plugins/updraftplus/) to fulfill your backup requirements.
Your upcoming reply will be treated with confidentiality and will only be visible to you and me.
✙ To resolve the issue, I may need your consent to deactivate and reactivate plugins and the theme, as well as make configuration changes on the site if necessary. This emphasizes the significance of having a backup.
Thanks for your reply. I've checked and I'm still not so sure how to replicate the issue.
On the French primary language page, I've removed the colon as shown in the attached screenshot. Then, I translated the page into English and everything seems fine. hidden link
Could you record a short screen recording showing me the issue? You can use this free tool hidden link for recording purposes.
This is not the sentence I was talking about. That sentence was already in English.
Please see the (yellow) highlighted text in the images below. One is in the Steering committee tab, the other is in the About tab.
The highlighted text is in French when it should be in English. In both cases, the issue is in a list with two levels, and it affects a sentence in the first level of the list.
Thanks for your reply. I can see the untranslated strings you mentioned. You said, "if I don't put the colons highlighted in yellow, the sentence preceding that colon is not translated in the other language on the frontend."
However, after adding a colon to the first level of your lists in French hidden link , as shown in the attached screenshot, the issue still persists, as also shown in the screenshot. Could you clarify how the colon is related to the translation not appearing on the English language page hidden link ?
Could you please list the steps to replicate the issue?
"Could you clarify how the colon is related to the translation not appearing on the English language page"
Here is my clarification:
At first, I had a list with two levels, and in those lists, the item in the first level did not appear as translated on the front end even though it is translated in the WPML ATE. I tried editing the French, resaving, editing the translation, resaving, etc. Eventually, in the original language, I added a colon at the end of the first level. And after I did that, the sentence appeared as translated in English. That's how I found out the colon seemed to be related with this bug.
So the steps would be:
1. Go in the French language, add a colon at the end of the first item in a two-level list
2. Save
3. Go in the English page and click on Edit translation
4. Check that the sentence in English is still there. If so, save (or make a small change and save), if not add it and save. This fixed the issue a few times for me.
If it doesn't work now, I don't know. I just know that when I did it a few times it worked. But in any case, something is preventing those sentences from appearing as translated on the front-end, and it's always the first item in lists with two levels.
Thanks for your reply. I've tested it a few times but still can't figure out how to reproduce the issue. Could you record a short screen video using this free tool: hidden link and share the link with me? That way, I can better understand how you're replicating it.
As you'll see, in some cases, the sentence actually disappears from the ATE.
I can't find a clear logic for the issue other then it only appears in the first item of 2-level lists, but I think the video may still be useful.
Thanks for your reply. I've checked and I can see the issue now. It looks like the HTML structure is incorrect, hence causing the translation issue. I copied the HTML structure of the "Un ou des représentants d’organismes publics" section and corrected it using ChatGPT. Now the translations show up fine in the English language, as shown in the attached screenshot.
<!-- wp:list -->
<ul class="wp-block-list">
<!-- wp:list-item -->
<li>Un ou des représentants d'organismes publics
<!-- wp:list -->
<ul class="wp-block-list">
<!-- wp:list-item -->
<li>Le cas échéant, un représentant du centre intégré de santé et de services sociaux ou du centre intégré universitaire de santé et de services sociaux du territoire de la municipalité :</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Arleyne Coombs (SAPA)</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
What you can do would be to switch to the code editor and copy the entire HTML structure. Then, ask ChatGPT to double-check the structure for you. I hope this helps.
Hm, that's unfortunate, because this is how WordPress created the list when I inserted a list block.
Also, on my end, when I tried to edit the HTML in the problematic list under the About tab, it caused an error, and I couldn't return to the visual editor unless I reverted to the original HTML. When I looked at your updated French HTML in the code editor (in the Steering Committee tab), it ended up creating some duplicate list items.
After some trial and error—switching between the HTML and visual editors—I was finally able to resolve the issue. Just wanted to flag this in case others run into the same problem or if there's a more stable way to edit these lists without breaking the block editor.
