Add, replace or change text with CSS

by

Hello guys,

In this tutorial we are going to see how we can add a text through CSS, even as a replacement for an existing text.

Of course there are other better methods, modifying the php (if your website is made with WordPress) but if we want a quick solution or we don't know how to do it in another way, it can get us out of more than one trouble.

As we will see in this tutorial, doing it is very simple with a bit of CSS.

Specifically, we are going to learn to add a text in front of an existing one, add it after the existing text or replace it with the one we want.

Let's make a real case to make it clearer.

Here is the video tutorial:

Subscribe to my channel:

In the following image we can see some products with their product name:

change product title

Let's see how to add a word in front of the product name.

For this we are going to use the element inspector to see where to add the CSS.

We right-click on one of the titles and we will see an image like the following:

inspector elements

We can see that on the right there is a + sign, we click on it and the following empty css rule will appear:

empty css rule

As the first thing we are going to do is add a text in front of the title, we are going to complement the css rule in the following way:

h2.woocommerce-loop-product__title:before {
	content: "Producto ";
}

With the previous code we get the word product to appear in all our titles:

add word before css

If we want it behind the title of the product, we will change the rule to the following:

h2.woocommerce-loop-product__title:after {
	content: "Producto ";
}

If what we want is to replace the text with the word we want, we have to add the following code:

h2.woocommerce-loop-product__title {
	visibility: hidden;
}

h2.woocommerce-loop-product__title:before {
	content: " Producto ";
	visibility:visible;
}

In this way, first, we hide the name of the product and then we make the word that we wanted visible.

The end result would be:

removed css title

Remember that we have to add these changes to our WordPress.

To do this we go to Customize —> Additional CSS and add our code:

add css wordpress
Sometimes we can get out of interesting messes with a little CSS.

I hope you find it useful and any questions here you have me 😉

6 comments on “Add, replace or change text with CSS”

  1. Man, you saved me. I've been trying to edit some text within WPBakery for a while, a simple thing, a box that says "Read More" and I just wanted to translate it.
    I did a lot of things, I translated the whole Plugin with Loco Translate, I edited the .php code, I tried to edit the HTML directly, but it ended up giving me an error.
    And when it occurred to me to edit the text through CSS, well, my colleagues told me that it was not possible.
    But thanks to your Post, I was able to achieve it.

    Years have passed since this post was published, but anyway, from a distance (time and space), I take this moment to thank you.
    Thank you very much.

  3. The help was very good, I did not know how to do it, I used the translator, searched in woocommerce and nothing. but with your help I learned something new thank you…..

Leave a comment