[Resolved] Broken layout and missing translations on custom page
This thread is resolved. Here is a description of the problem and solution.
Problem: You are experiencing issues with the WPML plugin on your site, specifically with custom pages in your child theme folder. The strings on these pages are not getting translated, and the CSS breaks after switching languages. Additionally, the store page does not appear in the Italian version. Solution: 1. We found that deleting the translation of the (wp-cli) string resolved the issue with the Italian pages not opening correctly. Please verify if the Italian pages now open as expected. 2. For the CSS issue, it appears that custom CSS was added for the English homepage using its ID, but the translated homepage ID was not included. Ensure to include the ID for the translated homepage in your custom CSS. 3. Ensure that you have installed all necessary plugins for full functionality. Your site is missing WPML SEO, WooCommerce Multilingual, and ACF Multilingual. You can download the latest versions of these plugins from here.
If this solution does not resolve your issues or seems outdated, we 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. If issues persist, please open a new support ticket.
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.
No supporters are available to work today on this forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
Background of the issue:
I have tried using the WPML plugin on our site, but I encountered issues with custom pages in our child theme folder. The pages' strings don't get translated, and the CSS breaks after switching languages. See English: hidden link vs translated Italian version: hidden link. Additionally, the store page doesn't show in the Italian version.
Symptoms:
The strings on custom pages are not translated, and the CSS is broken after switching languages. The store page is missing in the Italian version.
Questions:
Why are the strings on custom pages not getting translated?
Why is the CSS broken after switching languages?
Why is the store page missing in the Italian version?
Thank you for your help. We've wrapped all strings according to your guide. And now WPML can translate the strings from the custom pages, so that's great. However, I'm still facing some major issues.
First of all, when I switch language, all of the pages get a Page doesn't exist error. (For example hidden link vs hidden link)
The only page that still appears in Italian version is the homepage, but the CSS is still broken for that page.
I've created an account for you so you can see our settings.
[Access Details Removed]
I removed the access details for your site's safety. If you don't see the form below, please don't add your credentials, as they will be publicly exposed٫ (hidden link)
1) Thanks for the access details. I created a sandbox site and installed your child theme. Please use the following URL to log in to the sandbox site. (hidden link)
I created a test page using the same template you use on your site, and it works correctly in both languages. Kindly check this page. (hidden link)
2) Could you please check if the issue persists in a minimal environment by following these steps?
1- Deactivate all the plugins except those active ones on the sandbox site.
2- Update your active plugins and themes to the latest version.
3- Check the translated pages.
If the issue is gone, activate them one by one to see which one is causing an interaction issue.
❌ Please backup your database before performing the above test ❌
However, in this test environment you can't see the issue that I was referring too. Would you be so kind to check out the pages I've sent you and see what's the issue?
I've got a feeling that the issue may be related to the URLs. Please check my previous ticket and see what happens there.
I would like to point out that the sandbox environment you created can not replicate any of the issues that I've mentioned to you.
The two issues I mentioned are these:
1) if i change language on any of our pages, the URL changes to Italian and I get an error that the page doesn't exist. Since you did not translate the sandbox page you've sent me, you can not see what I'm talking about. Please visit our site and try changing the languages to Italian on the bottom of the page so you can see it.
2) on the homepage, the page does seem to exist, however, the styling is broken. This can also not be replicated in your sandbox environment, so I kindly would like to ask you to see it on our site.
Also, I feel like doing this is not really efficient, since it takes way too long to resolve the issue. Can we schedule a 10 minutes call where I show you what I mean and we can discuss how to resolve this issue? Would really appreciate if you could find the time for this. I'm flexible so we can do it in your preferred time, but this would make it so much easier.
1) I'm afraid that we don't provide video support. Instead, we have a live chat.
2) I installed a local copy of your site, checked the page's issue, and was able to fix it after deleting the (wp-cli) string's translation. Please check if the Italian pages open correctly. (hidden link)
Note: Your site is missing the following plugins.
* WPML SEO
* WooCommerce Multilingual
* ACF Multilingual
You can download the latest version of these plugins from here.
I can see that some pages are resolved now, thank you! However, I still see an issue with the homepage and another page. The translation is added, but the layout is broken.
Could you please take a look?
1) hidden link
2) hidden link
And what did you mean by deleting the string's translation? Can you please clarify that?
You added custom CSS for the English homepage using its ID, but you don't have the translated homepage ID included. (Kindly check the attached screenshot)
