BugWP logo BugWP
Back to Community
Home / Community / Plugin → Translate wordpress with gtranslate

Fixing Common Issues with the GTranslate Plugin: Caching, CSS, and Element Conflicts

42 threads Sep 16, 2025 Plugin → Translate wordpress with gtranslate

Content

Many WordPress users rely on the 'Translate WordPress with GTranslate' plugin to make their sites multilingual. However, some common issues can arise during setup and use. Based on community reports and solutions, this guide outlines the most frequent problems and how to resolve them.

1. The Language Selector Doesn't Appear or Settings Don't Update

The Problem: You've configured the floating language selector or changed its settings, but the changes are only visible when you are logged into your WordPress dashboard. Logged-out users see the old version or nothing at all.

Why It Happens: This is almost always a caching issue. Many caching plugins or server-level caching systems serve a stored version of your site to visitors for speed. When you are logged in as an administrator, the cache is typically bypassed, which is why you see the changes.

The Solution: Clear your website's cache after making any changes to the GTranslate settings. This includes clearing any cache from your caching plugin (e.g., LiteSpeed, W3 Total Cache) and checking if your hosting provider has a server-level cache that also needs to be purged.

2. Clickable Elements or Forms Break After Translation

The Problem: Interactive elements like booking calendars, chat inputs, or form submit buttons malfunction or disappear entirely after a user switches the site's language.

Why It Happens: The Google Translate engine sometimes modifies the HTML structure of these dynamic elements, which can break their functionality. A common sign is the appearance of extra <font> tags within the element's code.

The Solution: Prevent these specific elements from being translated. You can do this by adding the notranslate class to the wrapper element of the calendar, chat box, or button. You may need to consult your theme or specific plugin's support (e.g., BuddyBoss) to find the correct CSS class or ID to target.

3. Layout and Styling Issues (Flipped Content, Missing Backgrounds)

The Problem: After translation, the site's layout breaks. This can include content flipping to a right-to-left (RTL) direction, background images or gradients repeating incorrectly, or footers disappearing.

Why It Happens: The translation process can interfere with existing CSS rules. For example, translating to an RTL language like Arabic can sometimes incorrectly apply dir="rtl" attributes to elements. Other issues, like missing backgrounds, can be related to CSS height properties being overridden.

The Solution: Targeted CSS can often fix these visual bugs. A common fix for full-height and background issues is to add the following rule to your site's Custom CSS area:

html { height: auto !important; }

For RTL issues, you may need to identify the specific element that has gained the dir="rtl" attribute and use CSS to override it, or use the notranslate class on that section's container.

4. The Language Selector is in the Wrong Place or Looks Crunched

The Problem: The language switcher appears in a strange location, overlaps other content, or causes the entire page layout to shift.

Why It Happens: This is typically caused by a conflict with your theme's existing CSS. The theme may be applying absolute positioning, specific height rules, or other layout properties that conflict with the GTranslate widget's CSS.

The Solution: Use custom CSS to reposition and style the widget. You will need to use your browser's inspector tool to identify the correct classes to target. For example:

.gt_switcher {
    position: absolute !important;
    top: 40px !important;
}

Important Note: Ensure the GTranslate shortcode or widget is not accidentally placed inside another HTML element, like a link (<a> tag), as this will also cause major functionality issues.

5. Fonts Change on Translated Pages

The Problem: When your site is viewed in its translated version, the font family changes from the one used in the original language.

Why It Happens: The original font may not fully support the character set of the new language. The browser then falls back to a different font that does support it, changing the overall look.

The Solution: You can use CSS to specify a font family for specific languages. For example, to set all headings to use a sans-serif font when the site is translated to Spanish, you could add:

html[lang="es"] h1,
html[lang="es"] h2,
html[lang="es"] h3 {
    font-family: sans-serif !important;
}

General Troubleshooting Tips

  • Always Clear Cache: Before concluding a solution doesn't work, clear all levels of your site's cache.
  • Provide a URL: When seeking help, always provide your website's URL. It is impossible to diagnose most layout and functional issues without seeing the live site.
  • Check for Conflicts: Temporarily disable other plugins to see if a conflict is causing the issue.
  • Use Custom CSS: The plugin's settings include a 'Custom CSS' box, which is the perfect place to add these corrective style rules.

By understanding these common issues, you can more effectively troubleshoot and enjoy a fully multilingual website with the GTranslate plugin.

Related Support Threads Support