Home Forums WoodMart support forum Translating Credit / debit card text on checkout page Reply To: Translating Credit / debit card text on checkout page

#549654

evolt.si
Participant

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,