Translating Credit / debit card text on checkout page

Hello, thank you for your answer.

I have synced the translator before and after making the change but it still doesn’t work.

I also have my language set up to my primary language Slovenian.

I allready had very similar issue with translating the word “addressess” to “Naslovi” in the account menu. I asked Xtemos support to try translating this for me and “magically” it worked! However this string got translated back to “addressess” for unknown reason after some time and despite my efforts I cannot change it back.

Please note, that I use Loco Translate A LOT! And so far it has been a great tool to translate different text without a problem. However there is some text that simply cannot get translated.

I’m providing you credidentials of my staging website. Please try translating:

– “Addressess” to “Naslovi” (Account menu)
– “Credit / debit card” to “Kreditna / Debetna kartica” (Checkout)

If you succeed, please let me know exactly how you did it, so I can do the same thing on my original website.

For further questions please don’t hesitate to write me.

Thank you.

I hope this message finds you well. I wanted to share an update regarding the issue I previously encountered, where I was unable to change the text “Credit card / debit card” to “Kreditna / debetna kartica” on our checkout page due to dynamic content updates. I’m pleased to report that I’ve successfully resolved the issue and would like to explain how, in case this solution proves useful for others facing similar challenges.

The core of the solution involved using a MutationObserver in JavaScript, which allowed me to monitor changes within the checkout page dynamically. This approach ensured that the text replacement would persist even when the page content was updated or modified after the initial page load.

Here’s a simplified overview of the PHP script I used, embedded within a WordPress action hook to ensure proper placement and execution:

php
Copy code
function custom_js_dynamic_text_change() {
?>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
var targetNode = document.querySelector(‘#main-content’); // Adjusted for specificity
var config = { childList: true, subtree: true };
var callback = function(mutationsList, observer) {
var labels = document.querySelectorAll(‘label’);
labels.forEach(function(label) {
if (label.textContent.includes(‘Credit card / debit card’)) {
label.innerHTML = label.innerHTML.replace(‘Credit card / debit card’, ‘Kreditna / debetna kartica’);
}
});
};
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);
});
</script>
<?php
}
add_action(‘wp_footer’, ‘custom_js_dynamic_text_change’);

This script was added to our site using the “Code Snippets” plugin, ensuring easy management and reversibility of custom code without directly editing theme files. I found this method particularly effective for addressing issues related to dynamically loaded content and ensuring the desired translations were correctly displayed.

I wanted to share this solution with your team to highlight a practical approach to managing dynamic text changes within WordPress, leveraging JavaScript’s MutationObserver alongside PHP for seamless integration. This method may offer a viable solution to similar issues encountered by others.

Thank you for your support and the invaluable resources you provide. I’m looking forward to any additional insights or feedback you might have regarding this approach.

Best regards,