The Porto Switcher Element is a versatile and essential header component that provides visitors with the ability to switch between languages and currencies on your website. It enhances user accessibility and supports international audiences by offering quick access to localized versions of your site and different pricing formats.
This element includes two switcher types:
- Language Switcher – allows users to switch between different site languages.
- Currency Switcher – enables users to change the displayed currency in WooCommerce-based stores.
Note: The Porto Switcher element is a placeholder (dummy) widget. It does not include built-in translation or currency conversion functionality by itself. Instead, it is designed to be replaced or integrated with third-party multilingual and currency management plugins such as WPML, Polylang, or WooCommerce Multi-Currency.
Its functionality and display are directly linked to the settings under Porto → Theme Options → Header → Language & Currency Switcher, where you can define how the switcher behaves and which external plugin it connects to.
When properly configured with one of these plugins, the Porto Switcher provides a seamless, visually consistent interface for switching languages or currencies, matching the overall design of your Porto-powered site.
Relationship with Theme Options
To ensure that the Porto Switcher Element functions correctly, you must configure its behavior in Porto → Theme Options → Header → Language & Currency Switcher.
This section controls how the switcher interacts with third-party multilingual and multi-currency plugins, as well as where and how it is displayed on your site.
Within this panel, you can:
- Enable or disable the Language and Currency switchers individually.
- Select the integration plugin used by the switcher (e.g., WPML or Polylang for language, and WooCommerce Multi-Currency for currency).
If you enable the Show Language Switcher HTML option, the language switcher will be rendered on the front end. Similarly, enabling the “Show Currency Switcher HTML” option will display the currency switcher.
These options activate the front-end rendering for the respective switchers when compatible third-party plugins are installed.
Once you have installed and configured your multilingual or multi-currency plugin, enable these options to make the switchers visible. After activation, you’ll also see additional settings allowing you to choose the display position of each switcher:
- Default – Renders the switcher inside the Porto Switcher Element (the dummy element added in the Header Builder).
- Top Navigation – Displays the switcher in the top navigation area of your header.
- Main Menu – Inserts the switcher within your primary navigation menu.
Note: When selecting Top Navigation or Main Menu, the exact display position may depend on your third-party plugin’s configuration (for example, WPML or Polylang menu integration settings).
The settings defined in this Theme Options panel directly control how the Porto Switcher Element behaves and where it appears when added via the Header Builder.
If no compatible plugin or configuration is selected, the element will remain a non-functional (dummy) placeholder and will not display any language or currency options.
How to Use the Porto Switcher Element
- Open your Header Builder (or the specific section where you want to add the switcher).
- Click Add New Element, then choose Porto Switcher Element from the element list.
- Configure the element to display in your desired location within the header (for example, in the top bar or beside the navigation menu).
- Select the switcher type — choose between Language or Currency.
- Apply your preferred design options (such as text color, typography, and hover effects).
- Save all changes and verify that your third-party plugin (WPML, Polylang, etc.) is correctly connected to the switcher.
Element Content Options
| Option | Description |
|---|---|
| Type | Choose the switcher type: Language or Currency. |
| Top Level Typography | Sets the font size, font weight, text transform, line height and letter spacing of the top-level menu items. |
| Top Level Bg Color | Controls the background color. |
| Top Level Hover Bg Color | Defines the hover background color. |
| Top Level Line Height | Adjusts the vertical spacing between text lines. |
| Dropdown Label Font | Controls the typography of dropdown label. |
| Dropdown Label Padding | Controls the padding of dropdown label. |
| Dropdown padding | Defines the padding of dropdown. |
| Dropdown label color options | Adjust the color options of dropdown label. |
Integration Notes
- To enable multilingual functionality, install and configure a translation plugin such as WPML or Polylang.
- For multi-currency support, use a plugin such as WCML or FOX.
- The Porto Switcher element will automatically adopt the output and logic from these third-party plugins while maintaining your theme’s styling.
- If no compatible plugin is installed, the switcher may appear as a non-functional (dummy) placeholder.
Additional Tips
- Use contrasting colors for hover states to ensure the switcher stands out visually.
- Keep the switcher positioned in the top header bar for easy visibility on all pages.
- Combine with other Porto header elements (e.g., social icons, contact info, or login buttons) for a professional, localized navigation experience.
- Check responsiveness on mobile and tablet to ensure the dropdown behaves properly.
The Porto Switcher Element offers a clean, design-consistent interface for language and currency switching. While it functions as a dummy component by default, it becomes a powerful localization tool when paired with third-party plugins like WPML, Polylang, or WooCommerce Multi-Currency — providing global audiences with a smooth, localized browsing experience.
