---
title: "How to Add Elementor Language Switcher with Translatepress in Header?"
url: https://theplusaddons.com/docs/add-elementor-language-switcher-with-translatepress-in-header/
date: 2023-10-28
modified: 2026-06-11
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Add-Elementor-Language-Switcher-with-Translatepress-in-Header_-1024x536.jpg
word_count: 443
---

# How to Add Elementor Language Switcher with Translatepress in Header?

## 

- Integrates the Header Meta Content widget from The Plus Addons for Elementor with the Translatepress plugin to add a language switcher in the header.
- Requires installation and activation of the Translatepress plugin and configuration of site languages within its settings.
- Utilizes the Meta Content tab to select Language Switcher and manage visibility across devices using the Responsive Device section.

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.

*To check the complete feature overview documentation of The Plus Addons for Elementor Header Meta Content widget, [click here](/docs/header-meta-content-widget-settings-overview/).*

**Best Used For:**

- 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

***Requirement – This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, install and activate the [TranslatePress](https://wordpress.org/plugins/translatepress-multilingual/) plugin.

Then configure the site languages and other relevant settings in the TranslatePress plugin.

![translatepress languages](https://theplusaddons.com/wp-content/uploads/2023/10/translatepress-languages.png)

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*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* 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.

![header meta content language switcher](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-language-switcher.png)

Suggested reading, [best 4 Elementor translation plugins for multilingual websites](https://theplusaddons.com/blog/best-elementor-translation-plugins/).

From the **Icon Left Space** and **Icon Right Space** sections, adjust the spacing around the language switcher icon. Use this when the switcher icon overlaps other header elements so you can maintain clean visual separation in your Elementor header.

From the **Responsive Device** section, manage the visibility of the item for different devices. This is useful when you want the language switcher visible on desktop but hidden on mobile to keep your mobile header uncluttered.

2. Go to the **Language Switcher** tab and enable the **Display Language Switcher** toggle. Then choose **TranslatePress** from the **Select** dropdown.

![header meta content language switcher settings translatepress](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-language-switcher-settings-translatepress.png)

From the **Before Text** and **After Text** fields, add text to display before and after the dropdown. Use this when you want to label the switcher with a prefix such as “Language:” 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](https://theplusaddons.com/docs/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. To add a WooCommerce mini cart or other functional elements alongside the language switcher, see [How to Add WooCommerce Mini Cart in Elementor Navigation Header Menu](https://theplusaddons.com/docs/add-woocommerce-mini-cart-in-elementor-navigation-header-menu/).

![header meta content language switcher demo](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-language-switcher-demo.gif)

Also, read [how to add search icon to Elementor navigation header menu](https://theplusaddons.com/docs/add-search-icon-to-elementor-navigation-header-menu/).