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

How To Replace Any Text On A Divi Website

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.

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

Last updated Dec 27, 2021 @ 5:39 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

18 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
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      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
      • Hemant Gaba

        Hey Esteban,

        The URL you shared is invalid, please share the valid URL for me to investigate further.

  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

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart