Replace Any Text On Your Website
There are various scenarios where we face the need to replace text or a single word with a different word or text of our choice, but we simply can’t edit it in the Divi Builder. This usually comes from a plugin that is generating some display or structure on the website. Sometimes it also occurs directly in Divi, such as in the Comment module, where there is no option to change the text with any settings. It is easy to overcome this limitation, so don’t worry! In this tutorial, you will learn about how you can replace a word or a phrase of text anywhere on your Divi website using a simple jQuery snippet.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Locate The CSS Selector Of The Text First
Before showing you the snippets to replace the text, you first need to find the exact CSS selector of that text. This can be done using the browser inspect tool. After finding the selector, I recommend testing it by changing the color to red, just to verify that you have indeed found the correct selector.
.selector {
color: red;
}Replace The Whole Text
To replace the whole text, first find the exact CSS class selector of the element and highlight it. Then, once this selector is correctly found, place that CSS class selector into the jQuery snippet below. Be sure to watch the video for an example of this in action.
<script>
jQuery(document).ready(function(){
setInterval(function(){
jQuery(".selector").html("Custom Text");
},100)
})
</script>
If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
Replace A Single Word Within Text
To replace a specific single word within a phrase of text, first find the exact CSS class selector of the entire text element and highlight it. Then, once this selector is correctly found, place that CSS class selector into the jQuery snippet below. Notice you will need to add the selector twice. Then here comes the part that is different from the previous method. You first need to place the word or text that is existing that you want to be replaced, then after the comma place the word or text that you want to replace it with. Be sure to watch the video for an example of this in action.
<script>
jQuery(document).ready(function(){
jQuery(".selector").text(jQuery(".selector").text().replace("Text You Want To Replace", "Text You Want To Replace It With"));
})
</script>
The snippet should be placed according to the instructions igiven in the first snippet.
Great post. I have done this previously for a few things and worked quite well. Comes in very handy. Thanks!
Thanks Josh, you’re welcome! Yes it can be very handy, works with anything. Even sometimes a simple word change in WooCommerce account page and other plugins.
This is a neat little trick that could also be used for simple translations in certain instances. I love using these snippets to make life easier without having to install a plugin.
Nice share, Nelson. Thanks!
Yes I’ve had customers use it for that before as well for little translation preferences.
And you’re welcome!
Nelson, will this affect page loading speed (grmetrix)?
Thanks for another great tip!
Randy. Fort Lauderdale.
It’s just a snippet of jQuery, your website is made of that, so no this is not a factor.
Can you use this snippet on pluggins? where would you paste it? same place? thanks, I love your content!
I’m not clear on what you are asking. You would use it the same way as shown, and paste it the same place in Divi.
Yes, i was able to do it. thanks!
There is a page that i was not able to locate The CSS selector of the text. It’s a radio group and I’m not able to pull the CSS selector for each line. Would you be able to help me? This is the link:
https://beckfordsministry.com/?fluentcrm=1&route=unsubscribe&ce_id=2655&hash=84a3b837316b495bd9b58e8ddc10afcf
and it is the text under “Please let us know a reason”
thanks a lot!
Hey Esteban,
The URL you shared is invalid, please share the valid URL for me to investigate further.
Great ! Helpful, as always. Unfortunately, it doesn’t seem to work very well with the comment dates.
Thanks anyway.
Hi Nelson!
Great tutorial and snippet, thnx!
In one case it doen’t work for me.
The .et-pb-contact-message is very badly translated in Dutch.
So with you snippet, I changed it to a better notification.
But when you fill in the form correct, you get an answer like: thanks for the message, etc.
But this text has the same class.
So instead of the succes message, I get the paragraph with the better translated error an and response.
I’m not that into jquery, you know an solution? 🙂
Hey Gijs,
I have understood the issue here and I’ll be needing the URL where this form is present in order to grab the right selector for the code.
Hi Nelson,
great tutorial, thank you! Is it possible to limit the replacing of text to a specific language?
Yes, by grabbing a specific class, it might be possible. Could you please share the URL of the website for me to investigate further?
Hi Nelson
Many thnx for this great an useful tutorial
I have issues when I click on “test.com/category/keyword” in my weblog in case which I try to use these code:
jQuery(document).ready(function(){
jQuery(“.comments-number a”).text(jQuery(“.comments-number a”).text().replace(“comments”, “YourComments”));
})
apparently the function run as a loop or something like this
Any help pls
Hello, thank you for your amazing tutorials!
I tried to change text on a button (I have two buttons for each article) and they become a text loop – both button texts repeated 18 times.
Is there any way to just change “Pirkt biļeti” to “Buy tickets” once with no text loop? When I add the same script for the other button, the text just becomes longer.
Here’s the website: https://dzk.uplejs.lv/en/upcoming-events/
The selector I use is .more-link, which applies to both buttons.
Here’s the code I used in the code module:
jQuery(document).ready(function(){
jQuery(“.more-link”).text(jQuery(“.more-link”).text().replace(“Pirkt biļeti”, “Buy tickets”));
})