Skip to content Skip to sidebar

Home › Support › English Support › [Resolved] Woocommerce Media Translation conflict

[Resolved] Woocommerce Media Translation conflict

This thread is resolved. Here is a description of the problem and solution.

Problem:
If you're experiencing an issue where the save button remains inactive when using the Media Translation feature in WPML, and you have Woocommerce and Mollie Payments enabled, the problem might be due to a CSS conflict caused by another plugin.
Solution:
We discovered that the Event Booking Manager for WooCommerce – WpEvently plugin, which is not on our compatibility list (https://wpml.org/plugin/), applies styles to default jQuery UI classes, affecting WPML’s media translation dialog. To resolve this, you can add the following CSS override to your theme’s functions.php file:

function my_custom_admin_inline_css() {<br />    echo '<style><br />    .wpml-media-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.alignleft:focus,<br />    .wpml-media-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.alignleft:hover,<br />    .wpml-media-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.alignright:focus,<br />    .wpml-media-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.alignright:hover {<br />        background-color: #373737 !important;<br />        color: #fff !important;<br />    }<br /><br />    .wpml-media-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.alignright {<br />        background-color: #2f7d92 !important;<br />        color: #fff !important;<br />        cursor: pointer !important;<br />        pointer-events: auto !important;<br />        opacity: 1 !important;<br />    }<br /><br />    .wpml-media-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.alignright:disabled {<br />        border-color: transparent !important;<br />        cursor: not-allowed !important;<br />    }<br />    </style>';<br />}<br />add_action('admin_head', 'my_custom_admin_inline_css');

Alternatively, consider contacting the plugin author for a permanent fix or use a plugin that is fully compatible with WPML.

If this solution does not apply to your case, or if it becomes outdated, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please open a new support ticket at WPML support forum.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: 

This topic contains 3 replies, has 0 voices.

Last updated by christineF-11 2 weeks ago.

Assisted by: Noman.

Author Posts
September 14, 2025 at 9:21 am #17399743

christineF-11

Background of the issue:
I am trying to add image translation using the Media Translation feature in WPML. However, I encountered an issue where the save button remains inactive. I discovered that when I disable Woocommerce and Mollie Payments, the save function works.

Symptoms:
The save button for image translation remains inactive unless Woocommerce and Mollie Payments are disabled.

Questions:
Who is at fault for the save button being inactive?
Why does disabling Woocommerce and Mollie Payments allow the save function to work?
September 14, 2025 at 2:35 pm #17400055

Noman
WPML Supporter since 06/2016

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting WPML Support. I tried to replicate the issue at fresh WP site by following the below steps:

1. Installed/activated WPML Multilingual CMS, WPML String Translation, WPML Media Translation, WooCommerce, WooCommerce Multilingual & Multicurrency, and Mollie Payments for WooCommerce plugins.

2. Created a product in the default language with a featured image.

3. Translated product into secondary language.

4. Went to WPML >> Media Translation and translated the image into secondary language.

"Save Media Translation" button works correctly for me as you can see in the attached screenshot.

Here is auto login URL of fresh WP site:
hidden link could you please try to reproduce the issue at this site and let me know the steps which you will follow to replicate it.

Thank you

Save media button.jpg
September 20, 2025 at 10:25 am #17418102

christineF-11

Hi Noman,

I almost gave up. But finally I succeeded in reproducing it. After adding the pluging Event Booking Manager for WooCommerce – WpEvently the button becomes deactivated. When you look now, you'll see that it isn't possible to translate media anymore.

And it seems to be the combination of woocommerce with wpevently.

tried on my own website, and by only deactivating WpEvently the media translation works.

I hope you can now figure what the issue is and where it needs to be fixed.

Cheers,
Gerard
September 21, 2025 at 4:35 pm #17419361

Noman
WPML Supporter since 06/2016

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thanks for reproducing the issue on a fresh WordPress site. After debugging, I found that the problem comes from some CSS loaded by the Event Booking Manager for WooCommerce – WpEvently plugin. Instead of using its own selectors, the plugin applies styles to default jQuery UI classes, which conflicts with WPML’s media translation dialog.

I couldn’t find this plugin in our compatibility list: https://wpml.org/plugin/

As a workaround, you can override the conflicting CSS by adding the following code to your theme’s functions.php file: 

function my_custom_admin_inline_css() {
    echo '<style>
    .wpml-media-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.alignleft:focus,
    .wpml-media-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.alignleft:hover,
    .wpml-media-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.alignright:focus,
    .wpml-media-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.alignright:hover {
        background-color: #373737 !important;
        color: #fff !important;
    }

    .wpml-media-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.alignright {
        background-color: #2f7d92 !important;
        color: #fff !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        opacity: 1 !important;
    }

    .wpml-media-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.alignright:disabled {
        border-color: transparent !important;
        cursor: not-allowed !important;
    }
    </style>';
}
add_action('admin_head', 'my_custom_admin_inline_css');

Alternatively, you may want to reach out to the plugin author here: hidden link to request a permanent fix, or consider using another plugin that is fully WPML-compatible.

Let me know if this helps or if you need any further assistance

Thank you for your cooperation

September 28, 2025 at 12:49 pm #17438940

christineF-11

Thank you Noman, this helped! I've included it in the functions.php and submitted a ticket to WPEvently.