Let’s say you’re implementing a multivendor marketplace on a WooCommerce website, but you do not want to use the strings/labels/words “vendor” and “vendors”, instead you want to call them “brand” and “brands”. There are a couple of ways you can go about this:
Method 1
Dokan recommends using a plugin called Loco Translate. This works most of the time, although when I was using it, there were one or two pages on the Dokan dashboard where the strings weren’t getting translated which is why I went with my method which I have written in “Method 2”
Method 2
This is where I used JavaScript and PHP to change the strings by adding them to the child theme’s functions.php file. Here is how I went about it.
First, add the following code to your child theme’s functions.php file:
add_filter('gettext', 'change_vendor_to_brand_all_dashboard_pages', 9999, 3);
function change_vendor_to_brand_all_dashboard_pages($translated_text, $text, $domain)
{
switch ($translated_text) {
case 'Vendor':
$translated_text = 'Brand';
break;
case 'Vendors':
$translated_text = 'Brands';
break;
case 'vendor':
$translated_text = 'brand';
break;
case 'vendors':
$translated_text = 'brands';
break;
case 'Store':
$translated_text = 'Brand';
break;
case 'Stores':
$translated_text = 'Brands';
break;
case 'store':
$translated_text = 'brand';
break;
case 'stores':
$translated_text = 'brands';
break;
}
return $translated_text;
}And then I also wrote the following JavaScript code that I attached to the website through an external JS file. This code is mainly used to edit the strings (texts) shown on the WordPress dashboard’s Dokan “Add new vendor” popup modal. The following code has a listener and checks for certain class names, which works perfectly.
document.addEventListener('DOMContentLoaded', function() {
// Define the text replacements
const replacements = {
'Vendor': 'Brand',
'Vendors': 'Brands',
'vendor': 'brand',
'vendors': 'brands',
'Store': 'Brand',
'Stores': 'Brands',
'store': 'brand',
'stores': 'brands',
// Add more replacements as needed
};
// Function to perform text replacements
function performTextReplacements(node) {
// Loop through each text node
node.childNodes.forEach(function(child) {
if (child.nodeType === Node.TEXT_NODE) {
// Perform replacements in the text content
let content = child.textContent;
Object.entries(replacements).forEach(([search, replace]) => {
content = content.replace(new RegExp('\\b' + search + '\\b', 'g'), replace);
});
child.textContent = content;
} else if (child.nodeType === Node.ELEMENT_NODE) {
// Recursively perform replacements in child elements
performTextReplacements(child);
}
});
}
// Perform text replacements in the entire document body
performTextReplacements(document.body);
});
jQuery(document).ready(function(){
// Function to replace text
function replaceText() {
// Replace text in regular text nodes
jQuery('body').find('*').addBack().contents().each(function() {
if (this.nodeType === 3) {
// Text node found, replace text
var newText = this.nodeValue
.replace(/\bVendor\b/g, 'Brand')
.replace(/\bVendors\b/g, 'Brands')
.replace(/\bvendor\b/g, 'brand')
.replace(/\bvendors\b/g, 'brands')
.replace(/\bstore\b/g, 'brand')
.replace(/\bStore\b/g, 'Brand')
.replace(/\bstores\b/g, 'brands')
.replace(/\bStores\b/g, 'Brands');
this.nodeValue = newText;
} else if (this.nodeType === 1 && this.tagName.toLowerCase() === 'input') {
// Input element found, replace placeholder attribute
var placeholder = jQuery(this).attr('placeholder');
if (placeholder) {
placeholder = placeholder
.replace(/\bVendor\b/g, 'Brand')
.replace(/\bVendors\b/g, 'Brands')
.replace(/\bvendor\b/g, 'brand')
.replace(/\bvendors\b/g, 'brands')
.replace(/\bstore\b/g, 'brand')
.replace(/\bStore\b/g, 'Brand')
.replace(/\bstores\b/g, 'brands')
.replace(/\bStores\b/g, 'Brands');
jQuery(this).attr('placeholder', placeholder);
}
}
});
}
// Function to execute code when URL changes
function handleURLChange() {
// Check if the current URL contains the dokan page URL pattern
if (window.location.href.includes('admin.php?page=dokan')) {
// Execute your function here
replaceText();
// Function to monitor appearance of .dokan-vendor-edit modal
function observeModalAppearance() {
// Check if the modal with class 'dokan-vendor-edit' exists
var modal = jQuery('.dokan-vendor-edit');
var successModal = jQuery('swal2-popup swal2-modal swal2-icon-success swal2-show')
if (modal.length) {
// Modal found, execute the replaceText function
replaceText();
function observeModalTitleChanges() {
// Get the current modal title
var modalTitle = modal.find('.tab-contents .content-header').text().trim();
// Update the button text based on the modal title
if (modalTitle === 'Account Info') {
// Change the button text for the first step
replaceText();
} else if (modalTitle === 'Address') {
// Change the button text for the second step
replaceText();
} else if (modalTitle === 'Payment Options') {
// Change the button text for the last step
replaceText();
}
// Observe changes in modal title again after a delay
setTimeout(observeModalTitleChanges, 100); // Adjust delay as needed
}
// Start observing changes in modal title
observeModalTitleChanges();
} else {
// Modal not found, wait and check again
setTimeout(observeModalAppearance, 500); // Adjust delay as needed
}
}
// Function to monitor appearance of the new modal
function observeNewModalAppearance() {
// Check if the new modal exists
var newModal = jQuery('.swal2-popup.swal2-modal.swal2-icon-success.swal2-show');
if (newModal.length) {
// New modal found, execute the replaceText function
console.log('New modal has appeared, executing code...');
replaceText();
} else {
// New modal not found, wait and check again
setTimeout(observeNewModalAppearance, 500); // Adjust delay as needed
}
}
// Function to observe changes in the table and update content
function observeTableChanges() {
// Select the target node (the table body)
var targetNode = document.querySelector('.wp-list-table tbody');
// Check if the target node exists
if (targetNode) {
// Create a new observer instance
var observer = new MutationObserver(function(mutationsList, observer) {
// Loop through mutations
mutationsList.forEach(function(mutation) {
// Check if nodes have been added
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
// Content has been added, perform text replacements
replaceText();
}
});
});
// Configuration of the observer
var config = { childList: true, subtree: true };
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
}
}
// Start observing table changes
observeTableChanges();
// Start observing modal appearance
observeModalAppearance();
observeNewModalAppearance();
// observeButtonAppearance();
// Function to monitor removal of .dokan-loader
function observeLoaderRemoval() {
// Select the target node
var targetNode = jQuery('.dokan-loader');
// Create a new observer instance
var observer = new MutationObserver(function(mutationsList, observer) {
// Check if the .dokan-loader element has been removed
if (!document.contains(targetNode[0])) {
// Execute your function here
console.log('.dokan-loader has been removed, executing code...');
replaceText();
// Disconnect the observer since we no longer need it
observer.disconnect();
}
});
// Configuration of the observer
var config = { childList: true, subtree: true };
// Start observing the target node for configured mutations
observer.observe(document.body, config);
}
// Start observing .dokan-loader removal
observeLoaderRemoval();
}
}
// Execute the function initially
handleURLChange();
// Listen for URL changes
window.onhashchange = function() {
handleURLChange();
};
});This is how I attached the JS file, by adding the following line to the child theme’s functions.php
function enqueue_custom_text_replacements_script() {
// Get the URL of the current theme directory
$theme_directory_uri = get_template_directory_uri();
// Enqueue the custom JavaScript file for both frontend and admin
wp_enqueue_script('custom-text-replacements', $theme_directory_uri . '-child/text-change.js', array(), '1.2.0', true);
}
// Enqueue the script for both frontend and admin
add_action('wp_enqueue_scripts', 'enqueue_custom_text_replacements_script');
add_action('admin_enqueue_scripts', 'enqueue_custom_text_replacements_script');Thank you for reading! I hope this article helped you, and if you require any help please feel free to comment below and I shall help you out as soon as possible.
Leave a Reply