Vai al contenuto principale

Come aggiungere testo su un prodotto WooCommerce su Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

In un tutorial precedente, noi hai presentato Divi. Per chi non lo sapesse, Divi è un tema WordPress premium progettato dal team Temi eleganti che offre vari servizi su WordPress e progetta plugin e temi.

Divi è un tema reattivo e quest'ultimo è compatibile con molti altri plugin tra cui abbiamo WooCommerce. Oggi ti mostreremo come dare un'animazione diversa ai tuoi prodotti WooCommerce.

A volte lo stile di WooCommerce può essere un po 'inappropriato, specialmente se il tuo stile CSS è un po' diverso. Questo tutorial, che sarà un po 'tecnico (un po 'di CSS e nient'altro), ti consentirà di rimediare.

Altri tutorial sul tema Divi

Cominciamo.

Come aggiungere un'immagine a un prodotto woocommerce

Modifica di un'icona per il testo al passaggio del mouse

Per impostazione predefinita, quando utilizzi WooCommerce con Divi e passi il mouse su un prodotto, vedi una piccola icona "+" che è un carattere (make-icona) proposto da Divi e che è il seguente:

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Icona di woocommerce predefinita

È davvero facile cambiarlo con un'icona diversa nelle impostazioni, ma se vuoi aggiungere del testo, è un'altra cosa? Ti mostrerò come ottenere questo risultato con gli snippet CSS di oggi e includerò anche codice opzionale da aggiungere al tuo sito.

Ecco cosa avremo completato una volta:

Risultato finale della modifica del prodotto Wordpress

Perché usare comunque il testo invece di un'icona?

Posso pensare ad alcuni motivi che possono farti fare questo:

Per definire dare un aspetto unico al tuo negozio: Tutto ciò che puoi fare per distinguere il tuo sito Divi / WooCommerce da un altro è sempre una buona cosa.

L'utilizzo di una parola come "Visualizza" o "Acquista" può generare più conversioni: Tutti devono fare ciò che è meglio per il proprio sito Web e puoi sfruttare i test A / B integrati su Divi per aiutarti.

Fonte d'ispirazione

Di recente ho esplorato un sito che conteneva testo sul prodotto hover. Ovviamente l'ho visto da altri siti di e-commerce che hanno parole anziché icone sul prodotto in bilico, quindi questo non era un nuovo concetto. Non avevo mai dovuto farlo su un tema Divi, e quando l'ho visto, mi sono posto una sfida e ho capito che è davvero facile implementarlo. Con pochissimo codice richiesto, sei sicuro di non influenzare le prestazioni del tuo blog.

Sito web di esempio

Implementazione del mouse sul testo

Passaggio 1: sovrapposizione di colori

Per prima cosa cambieremo il colore della sovrapposizione al passaggio del mouse. Questo è estremamente facile da fare su Divi. Nel modulo del tuo negozio Vai al " parametri di progettazione avanzati avanzati E seleziona il tuo colore.

Selezione di colori divi

Passaggio 2: aggiunta di CSS

Il seguente codice CSS in " Opzioni del tema> CSS personalizzato O sul foglio di stile del tema di tuo figlio.

.woocommerce .et_overlay: before {left: 0; margine sinistro: 0; contenuto: 'vista'; / *** Il tuo testo qui *** / font-family: 'Source Without Pro', Arial! / *** Scegli il tuo carattere *** / text-transform: maiuscolo; dimensione carattere: 24px; colore: #fff; / *** Imposta il colore del testo *** / font-weight: grassetto; text-align: center; larghezza: 100%; imbottitura: 5px 0; }

Se vuoi che i tuoi prodotti siano piuttosto rotondi, puoi aggiungere questo codice opzionale:

.woocommerce ul.products li.product un IMG, .et_overlay {border-radius: 50%; }

Questo è tutto!

Ora puoi visitare il tuo negozio e vedere come vengono prese in considerazione le modifiche.

Altri tutorial di Divi

Questo articolo contiene i commenti 5

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
10 azioni
quota6
Tweet
Enregistrer4