Hide language switcher names

I am trying to hide language names in the language switcher and show only flags. WPML support told me, that the standard language switcher is provided by the theme (Flatsome), so they couldn't help.

Flatsome support told me, that can't help with custom solutions.

I was trying to find by myself through the „inspect page“ what is responsible for those language names, but all i found were affected on the whole header-main content. Not found, what is responsible only for „language names“.

inspect page

So i asked WPML support again, what i can use for CSS or something to hide those names and the answer was: "function engage_header_langs()". And i do not understand what to do next.

Can anyone help with this?

The function you were given can likely be hooked into if you review your plugin's documentation.

However, this can be done with some simple jQuery as shown in the snippet below. If you are using a custom JS file you can add this there (assuming you are already out of noConflict mode). If not, you can use the last snippet noted for your functions.php file.

Update: I updated the script to adjust the css to display after it has removed the text. You will now need to add that to the functions.php file and the line of css above that to style.css (or wherever you are putting your css)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(".has-dropdown.header-language-dropdown a").contents().filter(function() {
  return this.nodeType === 3;
}).remove();

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="has-dropdown header-language-dropdown">
    <a href="#">
      "Eesti"
      <i class="image-icon">
        <img src="https://cdn.pixabay.com/photo/2015/11/12/16/24/flag-1040595_960_720.png">
      </i>
    </a>
  </li>
</ul>

<!-- end snippet -->

//Add this to style.css
.has-dropdown.header-language-dropdown a {
    display:none;
}

//If adding to WordPress functions.php, use this block.
function add_script_to_head() {
    ?>
        <script>
            jQuery(document).ready(function($) {
                $(".has-dropdown.header-language-dropdown a").contents().filter(function() {
                    return this.nodeType === 3;
                }).remove().css('display', 'revert');
            });
        </script>
    <?php
}
add_action('wp_head', 'add_script_to_head');