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.

22

Last updated Dec 27, 2021 @ 5:39 pm

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

9 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
  5. Ghislain

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

    Reply

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart