Elementor - Image Widget: Translated Images Display the Original ALT Text

Open

Reported for: WPML Multilingual CMS 4.6.15

Overview of the issue

When using Elementor’s Image Widget, the translated version of a page may still reference the original language’s image, leading to incorrect ALT text being displayed in the secondary language.

Workaround

Please, make sure of having a full site backup of your site before proceeding.

Open your theme’s functions.php file.

Add the following snippet:

// WPML: Find translatable IDs in Elementor Widgets
add_filter( 'elementor/frontend/before_render', 'wpml_compsupp_find_translatable_post_ids_in_settings' );
 
function wpml_compsupp_find_translatable_post_ids_in_settings( $element ) {
 
    $widget_name = $element->get_name();
    $settings    = $element->get_settings();
 
    // Recursively translate post IDs in settings array
    $translated_settings = wpml_compsupp_find_translatable_post_ids_in_array( $settings, $widget_name );
 
    $element->set_settings( $translated_settings );
}
 
function wpml_compsupp_find_translatable_post_ids_in_array( $settings, $widget_name, $path = [] ) {
 
    $apply_translations = true; // if set to false, translated IDs are not applied to the content
 
    foreach ( $settings as $key => &$value ) {
        // Translate IDs and handle nested settings
        $currentPath = array_merge($path, [$key]);
 
        if ( is_array( $value ) || is_object( $value ) ) {
            // If the value is an array or object, run the function recursively
            $value = wpml_compsupp_find_translatable_post_ids_in_array((array)$value, $widget_name, $currentPath);
        } elseif ( is_numeric( $value ) && $value != 0 ) {
            // Translate post ID if it is numeric and a valid post type exists
            $post_type   = get_post_type( $value );
            $post_status = get_post_status( $value );
 
            if ( $post_type && $post_status == 'publish' ) {
                $translated_value = apply_filters( 'wpml_object_id', $value, $post_type, true );
 
                if ($apply_translations === true ) {
                    $value = $translated_value;
                }
            }
        }
    }
 
    return $settings;
}

6 Antworten zu “Elementor - Image Widget: Translated Images Display the Original ALT Text”

aaronM-23 sagt:

März 25, 2025 at 9:01 am

Thank you, that worked!

Moving forward, should I keep this or will I need to remove update it in the future and can I be notified?

Antworten
- Nicolas V. sagt:
  
  März 25, 2025 at 10:03 am
  
  Hi Aaron,
  I’m glad to hear that worked for you! This fix will be included in the next WPML version (4.7.3), which is expected to be released around mid-April. While I don’t have an exact release date yet, we’ll make sure to keep this page updated.
  
  Antworten
chulalakB sagt:

April 22, 2025 at 5:21 am

Hello there,

We are facing a similar issue but with Elementor Image Widget’s Link > Custom URL.

We have completed 2 languages – English (default) and French.
We are currently adding 2 more languages – Arabic and German.

Issue:
– English – In page A, we added an image and custom URL link to page B.
– We added the French translation for page B.
– We added the French translation for page A.
– When viewing page A in English or French, the image is linked to the page B English version.
– So, from French language we are jumping to English and it is a bad experience over all, having to switch the language again from page B.

Antworten
- Nicolas V. sagt:
  
  April 22, 2025 at 11:14 am
  
  Hi, thanks for contacting us.
  
  If you translated the page that is being linked after setting the link, you might want to try the following steps to update the URLs:
  
  -Make sure you’ve added the workaround code from this erratum page.
  -Go to „WPML > Settings > Translate Link Targets“ and click “Scan now and adjust links”.
  -Keep the window open until the process finishes.
  -Then, clear all caches, including Elementor’s cache via „Elementor > Tools > Clear Files & Data“.
  
  If the issue persists, don’t hesitate to start a chat on our support forum, we’ll be happy to assist you.
  
  Good news: this issue will be permanently fixed in WPML 4.7.4, which is coming very soon, so stay tuned!
  
  Antworten
  - chulalakB sagt:
    
    April 23, 2025 at 7:47 am
    
    Hi Nicolas, thank you for your response.
    
    We actually did all of that previously (except the Elementor cache clearing). We just did all of the steps and it still doesn’t open the French links from French home page.
    
    Please note that these images with links are in a ‚Saved Template‘ (default EN) that has the FR translation already.
    In the Home page (default EN version), we added the Template widget and selected the Template.
    The Home page already has the FR translation added via WPML.
    
    Perhaps, somehow the FR Home page is still getting data (image links only) from the EN Template?
    Even though the image captions are showing FR captions (added via Media Translations).
    
    Sorry for hijacking this ticket, if you need me to create a new ticket, just let me know.
    
    Antworten
    - Nicolas V. sagt:
      
      April 23, 2025 at 9:04 pm
      
      Hi,
      
      Thanks for the clarification. From what you described, it sounds like you’re facing a different issue here where the template ID is not translated and the French version of the page is still referencing the English template.
      
      To resolve this properly, could you please start a chat with our support team so we can take a closer look and help you sort it out quickly.
      
      Antworten

Overview of the issue

Workaround

6 Antworten zu “Elementor - Image Widget: Translated Images Display the Original ALT Text”

Eine Antwort hinterlassen