Language Selector Styling

Adding your own CSS code or HTML button
Override language selector CSS
You can add your own CSS rules to customize the language button. Weglot automatically adds a button in your page, that is either a dropdown or a list and will look like this:
Dropdown
List
<aside data-wg-notranslate class="country-selector weglot-dropdown weglot-default weglot-invert">
    <input id="weglot_choice" type="checkbox" name="menu">
    <label for="weglot_choice" class="wgcurrent wg-li weglot-flags flag-0 en" data-code-language="en">
        <span>EN</span>
    </label>
    <ul>
        <li class="wg-li weglot-flags flag-0 fr" data-code-language="fr">
            <a data-wg-notranslate href="http://example.com/">FR</a>
        </li>
    </ul>
</aside>
You can use these classes to add your own rules. For example adding this in "Override CSS" to make the language name uppercase. :
.country-selector a {
    text-transform: uppercase;
}
Override CSS on the WordPress back office
You can add your custom CSS rules directly on your WordPress back office. To do that, connect you on your WordPress and go to: Weglot > Language button design (Optional) > Override CSS
Override CSS using WordPress Hook
This filter allows you to add custom style by default without going through the settings.
<?php
​
add_filter( 'weglot_css_custom_inline', 'custom_weglot_css_custom_inline' );​
function custom_weglot_css_custom_inline( $css_custom ){     
    $css_custom .= '.country-selector { background-color: red; }'; 
    return $css_custom;
}
Override HTML using WordPress Hook
<?php
​
add_filter( 'weglot_button_html', 'custom_weglot_button_html', 10, 2 );
function custom_weglot_button_html( $button_html, $add_class ) {
​
	$button_html = '<div style="border: 1px solid red;"><p>Choose your language:</p>' . $button_html . '</div>';
​
	return $button_html;
}
Translate WooCommerce Product URLs
Change flag size
Last updated -3