Aggiungi, sostituisci o cambia testo con CSS

Ciao ragazzi

In questo tutorial vedremo come aggiungere un testo tramite CSS, anche in sostituzione di un testo esistente.

Certo ci sono altri metodi migliori, modificare il php (se il tuo sito è realizzato con WordPress) ma se vogliamo una soluzione rapida o non sappiamo come farlo in un altro modo, può tirarci fuori più di una guaio.

Come vedremo in questo tutorial, farlo è molto semplice con un po' di CSS.

Nello specifico, impareremo ad aggiungere un testo davanti a un altro esistente, aggiungerlo dopo il testo esistente o sostituirlo con quello che vogliamo.

Facciamo un caso reale per renderlo più chiaro.

Ecco il video tutorial:

Nell'immagine seguente possiamo vedere alcuni prodotti con il loro nome prodotto:

Vediamo come aggiungere una parola davanti al nome del prodotto.

Per questo useremo l'ispettore degli elementi per vedere dove aggiungere il CSS.

Facciamo clic con il tasto destro su uno dei titoli e vedremo un'immagine come la seguente:

Possiamo vedere che sulla destra c'è un segno +, facciamo clic su di esso e apparirà la seguente regola CSS vuota:

Poiché la prima cosa che faremo è aggiungere un testo davanti al titolo, completeremo la regola CSS nel modo seguente:

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

Con il codice precedente facciamo comparire la parola prodotto in tutti i nostri titoli:

Se lo vogliamo dietro il titolo del prodotto, cambieremo la regola come segue:

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

Se quello che vogliamo è sostituire il testo con la parola che vogliamo, dobbiamo aggiungere il seguente codice:

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

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

In questo modo prima nascondiamo il nome del prodotto e poi rendiamo visibile la parola che volevamo.

Il risultato finale sarebbe:

Ricorda che dobbiamo aggiungere queste modifiche al nostro WordPress.

Per fare ciò andiamo su Personalizza —> CSS aggiuntivo e aggiungiamo il nostro codice:

A volte possiamo uscire da pasticci interessanti con un po' di CSS.

Spero che lo trovi utile e per qualsiasi domanda qui mi hai 😉