Hey there
I’m wondering if there is a way to hide a floating button I’ve created based on the language the page is displaying. I’d like it to display only on the English pages, not on the french, Russian or Spanish versions of the pages I’ve created using WPML.
Hi Heather,
Thanks for reaching out.
It’s not currently possible, with WPML, it creates a duplicate of the current page for translation. And it’s not element specific translation. Hence, you can simply add your preferred element on English page, but don’t add it to other languages. The pages for each language are existing and standalone pages, what you do in English page has no effect on other pages of each language.
Or are you using string translation instead of manual translation? It should be manually translated. Please check these
Thanks!
My issue is that I have a floating button that shows up on all the pages, and it’s in English. I’m looking for a way to hide it on non-english pages or ideally have different language versions show up on the correct language pages. I’ve created the floating button through css.
Hi There,
You can try with this custom CSS:
html[lang="fr-FR"] .your-buttons {
display: none !important;
}
You should add the your-buttons to the buttons you want to hide.
Hope it helps 
Yes! That’s exactly what I was looking for. Thank you so much.
Glad we were able to help
One last thing I’m trying to hide the button from multiple languages, then just create one for each language that would show on it’s own language, but be hidden on the others. I tried this:
html[lang=“fr-FR, ru-RU,es-ES, en-EN”] .your-buttons {
display: none !important;
}
For French, Russian, Spanish, English
But it doesn’t seem to be working.
Hi again,
Try changing your code to this:
html[lang="fr-FR"] .your-buttons, html[lang="ru-RU"] .your-buttons, html[lang="es-ES"] .your-buttons, , html[lang="en-EN"] .your-buttons {
display: none !important;
}
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Hope this helps!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.