Are you looking to add an Elementor language switcher in the header? With the Header Meta Content widget from The Plus Addons for Elementor and the TranslatePress plugin, you can display a language switcher in your Elementor header without writing any code.
What It Does
The Header Meta Content widget renders a TranslatePress language switcher inside its own Meta Content repeater, so the switcher’s color, spacing, and layout come from the same Elementor panel as the rest of the header instead of TranslatePress’s own default markup.
To check the complete feature overview documentation of The Plus Addons for Elementor Header Meta Content widget, click here.
Why It Matters
TranslatePress ships its own switcher markup, which usually needs manual CSS overrides to match a custom Elementor header. Rendering it through Header Meta Content instead keeps the switcher visually consistent with the rest of the header on every language, without a separate stylesheet to maintain.
What You Get
- A TranslatePress language switcher rendered inside the Header Meta Content widget, styled from the same Elementor panel as the rest of the header
- Before and after text fields to label the dropdown for visitors
- Per-device visibility so the switcher can be shown or hidden independently on desktop and mobile
Benefits
- Multilingual websites that need a visible language switcher in the site header
- Agency and portfolio sites serving audiences across multiple countries
- WooCommerce stores with international customers who need to switch languages while browsing products
Capabilities
- Language Switcher option in the Meta Content repeater, with a Display Language Switcher toggle and a TranslatePress selection in the Select dropdown
- Before Text and After Text fields around the dropdown
- Icon Left Space and Icon Right Space plus Responsive Device visibility on the item itself
Requirement – This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.
How It Works
Setting a Meta Content item to Language Switcher and choosing TranslatePress from the Select dropdown hands the switcher’s language list to TranslatePress itself, while the Header Meta Content widget wraps it in Elementor-controlled markup for the before/after text, spacing, and visibility settings. WPML and TranslatePress are two independent code paths behind the same Language Switcher option, only one can be active per item.
How to Use It
To do this, install and activate the TranslatePress plugin.
Then configure the site languages and other relevant settings in the TranslatePress plugin.
Once done, add the Header Meta Content widget to the header template and follow the steps.
Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
1. In the Meta Content tab, open an item and select Language Switcher from the Select Options dropdown. This tells the widget item to render the language switcher provided by your TranslatePress plugin.
Also Read: best 4 Elementor translation plugins for multilingual websites.
From the Icon Left Space and Icon Right Space sections, adjust the spacing around the language switcher icon. From the Responsive Device section, manage the visibility of the item for different devices.
2. Go to the Language Switcher tab and enable the Display Language Switcher toggle. Then choose TranslatePress from the Select dropdown.
From the Before Text and After Text fields, add text to display before and after the dropdown, such as a “Language:” prefix so visitors understand what the dropdown controls at a glance.
If you use WPML for your multilingual website instead of TranslatePress, follow How to Add Elementor Language Switcher with WPML in Header for the equivalent steps.
Now you will be able to see a language switcher in the Elementor header.
Use Cases
- Multilingual websites that need a visible language switcher in the site header
- Agency and portfolio sites serving audiences across multiple countries
- WooCommerce stores with international customers who need to switch languages while browsing products
Limitations
- The switcher only shows languages already configured in TranslatePress; it does not add or manage translations itself
- There is no dedicated Country Flag, Native Name, or Translated Name toggle on the TranslatePress path the way there is for WPML; the display format follows what TranslatePress itself renders
- Only one language-switcher source can be selected per item; WPML and TranslatePress cannot both drive the same switcher instance at once
Troubleshooting
- Switcher does not appear after enabling Display Language Switcher – confirm TranslatePress itself has at least one additional language configured; the item stays empty until TranslatePress has a language list to hand over.
- Icon or flag spacing looks uneven across breakpoints – a pattern reported on the WPML path of the same widget applies here too; check the Responsive Device section and re-verify spacing on each breakpoint individually rather than assuming desktop spacing carries over.
- Switcher disappears after activating a popup or conditional-display plugin – a related conflict pattern seen with other language-switcher plugins on this widget; deactivate the conditional-display plugin temporarily to confirm whether it is hiding the switcher markup.
Also, read how to add search icon to Elementor navigation header menu.
