Change "select language" text

Hello,

that text is generated by Google. However, with a little trick it can be changed:

1) Add a Text widget right after the translator.
2) Use the following content:

<script type="text/javascript">
jQuery(".goog-te-combo").get(0).options[0].text = "Your text here";
</script>

Yes and no. I think you are on to something in terms of using JS to change the option text. However, the .goog-te-combo select element isn’t in the DOM on page load so jQuery can’t access it yet and the result is the following error:

Uncaught TypeError: Cannot read property ‘options’ of undefined

I also tried

jQuery(".goog-te-combo option:first").text("Translate");

which at least doesn’t produce an error on failure, but still fails to change the option since it isn’t in the DOM yet. Does the google script run any kind of trigger when it is loaded that we could watch for?

On a side note, in my local development, the dropdown is never generated. Is this normal? Works great live.

Hello,

yes, on page load the combo doesn’t exist. That’s why you should place the code in a widget after the translator. Did you try it this way?

The other way is to edit the following file:

/templates/main.tpl

Lines 105-108, look like this:

function initializeGoogleTranslateElement() {
	new google.translate.TranslateElement({
{{ options_formatted }}	}{{ has_container.true:begin }}, "google_translate_element"{{ has_container.true:end }});
}

Modify it so it becomes:

function initializeGoogleTranslateElement() {
	new google.translate.TranslateElement({
{{ options_formatted }}	}{{ has_container.true:begin }}, "google_translate_element"{{ has_container.true:end }});
	jQuery(".goog-te-combo").get(0).options[0].text = "Your text here";
}

Your line of javascript code looks good too. But perhaps is a good idea to try to use jQuery as little as possible, so you don’t have to be worried when the library gets modified or updated.

The text widget approach did not work, nor does loading the script in the footer.

If you are already wrapping the google script in this function:

function initializeGoogleTranslateElement() {
	new google.translate.TranslateElement({
{{ options_formatted }}	}{{ has_container.true:begin }}, "google_translate_element"{{ has_container.true:end }});
}

in a filter. Maybe you could consider adding a custom trigger?

Hello,

what Style mode are you using? The code snippets provided are for the first two options.

You may also try this other code:

<script type="text/javascript">
var TranslatorLoader = {
	_get_combo:  function() {
		return jQuery(".goog-te-combo").get(0);
	},
	changeDefaultOption: function() {
		var combo = TranslatorLoader._get_combo();
		combo.options[0].text = "Your text here";
	},
	testLoaded: function() {
		var combo = TranslatorLoader._get_combo();
		if (combo && combo.options[0])
			TranslatorLoader.changeDefaultOption();
		else
			setTimeout(TranslatorLoader.testLoaded, 100);
	}
};
TranslatorLoader.testLoaded();
</script>

Let me know if you’re using the third Style mode, as the code will be different.

Also please provide a URL/link with the changes mentioned before, so we can see where is the problem.

If for any reason you prefer not to post the URL/link here, please send a message using the following contact form:

https://www.prisna.net/contact-us/

I can confirm that your latest block of code does change the option name.

https://sandbox.kathyisawesome.com/

Thanks so much!

HI
i am using Google Website Translator by Prisna.net plugin but not working well in case of default translate.
My website in Spanish language and i want loading time in Portuguese and remove “select language” form drop down list please help me.

@royalsiyol, please start your own thread.