WordPress - Design - How to delete an extra button?

In this article, you'll learn how to delete extra language switchers on your WordPress website. 

Why are multiple language switchers appearing?

If multiple language switchers are displayed after adding the Weglot switcher to your website's native menus, you may need to hide the extra ones, Which can be easily done using a simple CSS rule.

1. Identify the language selector's parent selector

First, locate the HTML parent element that contains the Weglot switcher you want to hide. It's important to find the correct container to ensure that only the unnecessary language switcher is hidden.

How to find the parent selector :

1. Open your website in a browser.

   Right-click on the language switcher you want to remove and select ”Inspect”.

   In the Developer Tools panel, identify the HTML element that wraps the language switcher.

   Note its ID or class name :

   • If it's an ID, prefix it with # (e.g. #main-navigation ).
   • If it's a class, prefix it with.  (e.g. .menu-container ).

For example, if the parent element has the ID main-navigation , the corresponding selector would be :

#main-navigation .wg-li {
    display: none;
}

2. Add the CSS rule

1. Go to your WordPress dashboard.
2. Navigate to Weglot plugin settings > Override CSS.
3. Paste the following code, replacing [INSERT_PARENT_SELECTOR_HERE] with the right CSS selector :

[INSERT_PARENT_SELECTOR_HERE] .wg-li {
    display: none;
}

4. Click ”Save changes”.

Here is an example of what it should look like (according to the previous example) :

3. Verify the changes

After saving, refresh your website to confirm that the relevant language switcher is no longer visible. That's it! You've successfully removed the unwanted language switcher from your WordPress site.