Shortcode language flags not showing

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

Problem:
If you're experiencing issues with language flags not displaying when using a shortcode in WPML, it might be due to the page not having translations available. Additionally, the flags might not be set up correctly under the custom flag settings.
Solution:
First, ensure that the language flags are correctly configured in WPML. You can do this by navigating to WPML > Languages > Site Languages > Edit Languages > Custom flag. Here, you can adjust or replace the flag, such as changing it to the USA flag.

If the issue is related to the flags not appearing because the page lacks translations, you can enable the display of secondary languages even if they don't have translations. Go to WPML > Languages > Language switcher options > How to handle languages without translation and select 'Link to home of language for missing translations'.

Additionally, if you notice any style issues with the display of the language flags, you might need to apply custom CSS. Here is an example of CSS that could help:


.et-menu-nav .menu-item-wpml-ls-10-en > .sub-menu {
    display: inline-block;
    padding: 0;
    margin: 0;
    border: none;
    white-space: nowrap;
 
}
 
#menu-utility-menu-1 > li.menu-item.wpml-ls-slot-10.wpml-ls-item.wpml-ls-item-en.wpml-ls-current-language.wpml-ls-menu-item.wpml-ls-first-item.menu-item-type-wpml_ls_menu_item.menu-item-object-wpml_ls_menu_item.menu-item-has-children.menu-item-wpml-ls-10-en > ul > li {
    display: inline-block;
    max-width: 178px;
    padding: 0;
    margin: 0;
}
 
 
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul, .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu, .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu ul, .et_pb_menu_1_tb_header.et_pb_menu .nav li ul, .et_pb_menu_1_tb_header.et_pb_menu .et_mobile_menu, .et_pb_menu_1_tb_header.et_pb_menu .et_mobile_menu ul{
     max-width: 178px;
}
 
.utility-nav .et_pb_row .et-menu-nav li:last-child{
    max-width: 178px;
}

For more details on fixing styling and CSS issues, you can visit this documentation.

If this solution does not resolve your issue, or if it seems outdated or irrelevant to your specific 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. If needed, please open a new support ticket at WPML support forum for further assistance.

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: Documentation request

This topic contains 6 replies, has 2 voices.

Last updated by Mateus Getulio 8 months, 2 weeks ago.

Assisted by: Mateus Getulio.

Author	Posts
September 9, 2024 at 8:36 pm #16158827
ryanR-5	Background of the issue: I am trying to display language flags using the shortcode to show the filter. The issue can be seen on this page: hidden link Symptoms: The language flags don’t show when using the shortcode. Questions: Why are the language flags not showing when using the shortcode? Is there a specific setting or configuration needed to display the language flags?
September 10, 2024 at 1:32 pm #16161803
Mateus Getulio Supporter Languages: English (English ) Portuguese (Brazil) (Português ) Timezone: America/Sao_Paulo (GMT-03:00)	Hi Ryan, Thanks for contacting WPML support. I checked the site but I can't see those flags in the inspector, please check the screenshot attached. Kindly go to WPML > Languages > Custom language switcher > Edit it, and make sure that the Flag option is enabled: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-switcher/ If the option is already enabled, please go to WPML > Support > Troubleshooting page, then click the following: - Clear the Cache in WPML Also, please clear all other caches available, including the WPEngine one. Let me know please if that helps. Regards, Mateus
September 10, 2024 at 1:43 pm #16161868
ryanR-5	I added the Flag option that was no previously checked. The second language also doesn't appear. How do I change English to United States to show the correct flag? I also cleared the WPML cache and hosting cache.
September 10, 2024 at 1:57 pm #16162018
Mateus Getulio Supporter Languages: English (English ) Portuguese (Brazil) (Português ) Timezone: America/Sao_Paulo (GMT-03:00)	Hello, I would like to request temporary access (wp-admin and FTP) to your site to take better look at the issue. You will find the needed fields for this below the comment area when you log in to leave your next reply. The information you will enter is private which means only you and I can see and have access to it. Our Debugging Procedures I will be checking various settings in the backend to see if the issue can be resolved. Although I won't be making changes that affect the live site, it is still good practice to backup the site before providing us access. In the event that we do need to debug the site further, I will duplicate the site and work in a separate, local development environment to avoid affecting the live site. Privacy and Security Policy We have strict policies regarding privacy and access to your information. Please see: https://wpml.org/purchase/support-policy/privacy-and-security-when-providing-debug-information-for-support/ IMPORTANT - Please make a backup of site files and database before providing us access. - If you do not see the wp-admin/FTP fields this means your post & website login details will be made PUBLIC. DO NOT post your website details unless you see the required wp-admin/FTP fields. If you do not, please ask me to enable the private box. The private box looks like this: hidden link Please, let me know if you need any additional details. Have a nice day.
September 11, 2024 at 6:14 pm #16167831
Mateus Getulio Supporter Languages: English (English ) Portuguese (Brazil) (Português ) Timezone: America/Sao_Paulo (GMT-03:00)	Hello there, I checked it but I wasn't able to find where you're calling the custom language switcher, where are you adding the shortcode? Regarding the missing language in the language switcher, it happens because the home page doesn't have a translation yet. If you want to display the secondary language even if it doesn't have a translation you can enable it in WPML > Languages > Language switcher options > How to handle languages without translation and choosing the option 'Link to home of language for missing translations'. You can adjust the flag going to WPML > Languages > Site Languages > Edit Languages > Custom flag. I went ahead and already replaced it with the USA flag for you. Thank you, please let me know.
September 11, 2024 at 7:39 pm #16167994
ryanR-5	The custom language switcher is in the Utility Menu under Appearance > Menus title as WPML. I appreciate the help with this. Did you add the flag under the Custom flag section as you mentioned in your message?
September 12, 2024 at 1:19 pm #16171303
Mateus Getulio Supporter Languages: English (English ) Portuguese (Brazil) (Português ) Timezone: America/Sao_Paulo (GMT-03:00)	Hello there, I went ahead and added the flag and replaced it with the USA flag. I also enabled the option 'Link to home of language for missing translations' in 'How to handle languages without translation and choosing the option.' so that the secondary language appeared despite not having a translation yet. I noticed some style issues that I overcome with the following css: .et-menu-nav .menu-item-wpml-ls-10-en > .sub-menu { display: inline-block; padding: 0; margin: 0; border: none; white-space: nowrap; } #menu-utility-menu-1 > li.menu-item.wpml-ls-slot-10.wpml-ls-item.wpml-ls-item-en.wpml-ls-current-language.wpml-ls-menu-item.wpml-ls-first-item.menu-item-type-wpml_ls_menu_item.menu-item-object-wpml_ls_menu_item.menu-item-has-children.menu-item-wpml-ls-10-en > ul > li { display: inline-block; max-width: 178px; padding: 0; margin: 0; } .et_pb_menu_0_tb_header.et_pb_menu .nav li ul, .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu, .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu ul, .et_pb_menu_1_tb_header.et_pb_menu .nav li ul, .et_pb_menu_1_tb_header.et_pb_menu .et_mobile_menu, .et_pb_menu_1_tb_header.et_pb_menu .et_mobile_menu ul{ max-width: 178px; } .utility-nav .et_pb_row .et-menu-nav li:last-child{ max-width: 178px; } https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/ Please note: the code provided is to be used as an informational one. remember that custom coding is out of the scope of our support so we can't create, debug or modify code for you and it's your responsibility to maintain it. we hope the one we used as an example could point you in the right direction. Can you please review it and confirm it is working as expected now? Thank you, Mateus
September 13, 2024 at 12:00 pm #16175412
ryanR-5	Yes, it's working as expected. Thanks