Kadence Elements, Header, and Missing parts of pages

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

Problem:
The client is working on a multilingual WordPress site using WPML and Kadence, including Kadence Elements and Kadence Pro blocks. They are encountering issues with elements not displaying correctly across translations. Specific problems include a page only partially rendering despite being fully translated, the header not displaying correctly on the translated version, and hooked elements not appearing on WooCommerce product pages.
Solution:
For the partially rendering page and non-displaying elements, it was identified that the new blocks from the Kadence plugin are not yet compatible with WPML. To resolve this, the client needs to integrate translation support for these blocks. Detailed guidance can be found here: https://wpml.org/documentation/support/language-configuration-files/make-custom-gutenberg-blocks-translatable/
For the header issue, it was discovered that a Hero section with a white background was added at the top of the translated homepage, causing the transparent header to appear incorrectly. The solution involved deleting the Hero section from the translated homepage or applying CSS to hide it:

.page-id-6014 .page-hero-section {<br />    display: none;<br />}

If this solution does not resolve your issues or seems outdated, we recommend opening a new support ticket. Additionally, please check related known issues at https://wpml.org/known-issues/, verify the version of the permanent fix, and confirm that you have installed the latest versions of themes and plugins. For further assistance, feel free to contact us 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.

Tagged: Not WPML issue

This topic contains 3 replies, has 2 voices.

Last updated by Prosenjit Barman 11 months, 2 weeks ago.

Assisted by: Prosenjit Barman.

Author	Posts
May 26, 2024 at 6:59 pm #15671552
seanB-23	Background of the issue: This is the third time I filled this out, the ticket never submited, just spun for 30 minutes. - This GPT ticket summary stuff is terrible BTW. - So I am just going to delete it all and write what I wrote the first 2 times, and ended up saving to a note pad. I am working on a multilingual WordPress site using WPML and Kadence, including Kadence Elements and Kadence Pro blocks. The site is still under development, and I am attempting to set up multiple elements and pages in different languages. I am aiming to launch the site in about 10 languages but am encountering several issues with elements not displaying correctly across translations. Symptoms: I have quite a few issues with Kadence Elements and Pages here. 1. Page is only partlially rendering even though the translation shows a fully translated page. The page is made purely with Guttenberg WordPress Editor on Kadence with Kadence Pro blocks. hidden link <- Translated version only showing the first two rows. hidden link <- source showing the whole page 2. The header is not working correctly on the Translated version, it is just a WP header element, it works on other pages but not the home page. Use the two links to check the difference (besides all the pages missing from the menu as well) 3. Next we use Hooked elements to replace footers. This was able to work using the attached documenation, however Elements are not working anyhwere else at all. For example: Using the instructions from the documetnation, we got the footer working, but following the same steps on an element hooked into the Woo Commerce product page doesn't show up. I can see that there are 3 tranlsations, one for each language, but in the case of the product page, the element is not showing up. If I check the element in the translated languange, it is linked directly to the translated source. Example below. (as well as as screen shot) A: Source - Working - hidden link B: Translation - Not working - hidden link We have no caching plugin on right now so it's not that. We want to drop this site in about 10 languages but need to iron out these bugs? Not sure why it sometimes works and sometimes doesn't its terribly difficult to do the following for elements that automatically had translations (All of them) 1. Delete all translations, 2. Have the original Generate more with the "WordPress Editor" - Manaully edit and set language for those, and then hook the original element back into WPML (this conflicts with both reference documents linked, one says to do this, one doesnt) I am stumped. I can't sort this out. Support Documents I am using. https://wpml.org/forums/topic/translated-kadence-element-no-appearing-on-the-translated-product-page/ https://wpml.org/forums/topic/translated-kadence-elements-fail-to-show/ Questions: Why is the translated version of the page only partially rendering despite showing as fully translated in WPML? What could be causing the header and other elements like those hooked into the WooCommerce product page to not display correctly in their translated versions?
May 27, 2024 at 8:04 am #15672463
Prosenjit Barman WPML Supporter since 03/2023 Languages: English (English ) Timezone: Asia/Dhaka (GMT+06:00)	Hello There, Thanks for contacting WPML Support and briefly explaining the issues. I understand the issues you're facing, and I've included solutions for each of them below. Issues 1 and 3: Sections Not Showing I noticed that certain sections are not loading on the translated single product and homepage. Please be informed that the new blocks of the Kadence plugin are not compatible with WPML yet. You can find more information about this issue in the following Errata: https://wpml.org/errata/kadence-blocks-new-blocks-are-not-compatible-yet/. It's possible that you've used these new blocks on the homepage and single product templates, which is why the content isn't showing in the translated versions. To resolve this, you'll need to integrate translation support for those blocks to ensure they work correctly in each language. We have a comprehensive guide on integrating translation support for blocks, which might be helpful: https://wpml.org/documentation/support/language-configuration-files/make-custom-gutenberg-blocks-translatable/ Once the translation support is added, you need to resend the page for translation. If translation support is added properly the contents should appear in the translation editor and once you complete the translation, the translation should appear properly in the frontend. Issue 2: Header Not Showing in Translation If you have applied conditions to the header, you will need to apply the same conditions for the translated header. Otherwise, the translated header will not appear. Please open the translated and default header in two different tabs and ensure that the settings made in the translated header are the same as the default header. The issue should be resolved after correctly configuring the translated header. I hope the above information is helpful. However, If you need further clarification or find this too complex, please feel free to let me know. I would be happy to take a closer look and assist you further in this matter. Best regards, Prosenjit
May 27, 2024 at 1:34 pm #15674453
seanB-23	Hello, I went to edit the page to see if there was a header condition in the home page French page, there is not difference between the two pages. The header is just the default wordpress header editing through the customizer, on the theme. There are no contidtions to it at all, and the french page is set to respect the defualt settings. header.png I have managed to sort out the block issue. There was a Kadence Row, it was set to not be visible on, mobile, desktop and tablet. This block was where nothing was rending past. Removing this block was able to sort the page issue out, however. we still have the fact that the header is not rendering correctly.
May 28, 2024 at 5:05 am #15676182
Prosenjit Barman WPML Supporter since 03/2023 Languages: English (English ) Timezone: Asia/Dhaka (GMT+06:00)	Hello There, Thank you for the update. Glad to hear that the issue with sections has been resolved. Regarding the header issue: Upon closer inspection, I noticed that the Kadence header is loading correctly. However, a Hero section has been added at the top of the translated homepage with a white background. Since the header is configured to be transparent, this Hero section is causing the header to not appear visually correct. After applying the following CSS to hide the hero section on the French homepage, the header appeared correctly. Please check the attached screenshot. .page-id-6014 .page-hero-section { display: none; } Since the Hero section only appears on the translated homepage, the optimal solution is to open each translated homepage in the editor, locate the Hero section, and delete it. This approach is better than applying CSS to hide the section. Please let me know if the information above helps or if you need further assistance in this matter. I will be happy to help. Best regards, Prosenjit
May 29, 2024 at 11:07 am #15683057
seanB-23	Yes thank you. It seems impractical to add every specific page number for the hero, however it worked a charm for each language translation we have. I don't expect to have to do it more than a few times more though. This worked perfectly. Regards!