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.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Assistant!
Why work so hard? You can do this easily with a setting in our Divi Assistant plugin!
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 Divi Website Using Divi Assistant
Here are the simple steps to replace any text on your Divi website using our popular Divi Assistant plugin:
- Install and activate the Divi Assistant plugin
- Click on the Frontend Helper tab and the Replace Text subtab
- Enable the setting
I hope that is easy enough for you! 😉
Learn More About Divi Assistant!
Our flagship "helper" plugin has (141) main features to make your life easier when working with Divi!
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.