How To Replace Any Text On A Divi Website Tutorial by Pee Aye Creative

How To Replace Any Text On A Divi Website

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to replace any word or text phrase 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.

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

<script>
jQuery(document).ready(function(){
setInterval(function(){
jQuery(".selector").html("Custom Text");
},100)
})
</script>

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.

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

<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.

how to Replace Any Text On Your Website using the Divi Assistant plugin

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

19 Comments

  1. Josh Collier

    Great post. I have done this previously for a few things and worked quite well. Comes in very handy. Thanks!

    Reply
  2. Terry Hale

    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!

    Reply
  3. Randy Hunt

    Nelson, will this affect page loading speed (grmetrix)?

    Thanks for another great tip!
    Randy. Fort Lauderdale.

    Reply
  4. Esteban

    Can you use this snippet on pluggins? where would you paste it? same place? thanks, I love your content!

    Reply
  5. Ghislain

    Great ! Helpful, as always. Unfortunately, it doesn’t seem to work very well with the comment dates.
    Thanks anyway.

    Reply
  6. Gijs Roerdinkholder

    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? 🙂

    Reply
    • Hemant Gaba

      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.

      Reply
  7. Rainer

    Hi Nelson,
    great tutorial, thank you! Is it possible to limit the replacing of text to a specific language?

    Reply
    • Hemant Gaba

      Yes, by grabbing a specific class, it might be possible. Could you please share the URL of the website for me to investigate further?

      Reply
  8. Lisham

    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

    Reply
  9. Janis

    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”));
    })

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart