Come aggiungere testo su un prodotto WooCommerce su Divi
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
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere il testo su un prodotto WooCommerce su Divi
- Come cambiare il colore del menu tra le pagine su Divi
- Funzionalità che non conosci su Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente su Divi
Cominciamo.
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:
È 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:
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.
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.
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.
Crea facilmente il tuo negozio online
Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]
.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
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere testo su un prodotto Divi WooCommerce
- Come cambiare il colore del menu tra le pagine Divi
- Come personalizzare le griglie di un blog con Divi
- Come utilizzare il ruolo di Editor Divi su WordPress
- Come creare un dispositivo di scorrimento Divi a schermo intero
- Come cambiare il colore dei menu tra le pagine di Divi
- Funzionalità che probabilmente non conosci su Divi
- Come usare Divi Builder su WordPress
- Come usare il modulo di scorrimento video Divi
- Come utilizzare il modulo Divi Builder Flip
- Come aggiungere un modulo di testimonianza su Divi Builder
- Come usare il modulo di testo Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente Divi
- Come usare il modulo Divi Social Media
- Come utilizzare il modulo negozio sul tema WordPress Divi
- Come utilizzare il modulo barra laterale Divi
- Come utilizzare il modulo Tabella prezzi Divi
- Come utilizzare il modulo del titolo delle pubblicazioni Divi
- Come aggiungere un modulo video di Divi
- Come utilizzare il modulo di navigazione dell'articolo
- Come usare il modulo di ricerca Divi
- Come utilizzare il modulo portafoglio Divi
- Come usare il modulo persona su Divi Builder
- Come usare il modulo portafoglio con filtro Divi
- Come utilizzare il modulo di scorrimento a larghezza piena
- Come utilizzare il modulo immagine Divi Builder
- Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
- Come utilizzare il modulo della galleria di immagini
- Come utilizzare il modulo Divi Builder Full-Width Card
- Come utilizzare il modulo Divi Full Width Portfolio
- Come utilizzare il modulo di intestazione a tutta larghezza Divi
- Come utilizzare il modulo contatore Divi
- Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
- Come utilizzare il modulo Divi Email Optin
Testo diverso per prodotto? dici di aggiungerlo a nuovi prodotti? come? e dove?
Super articolo, grazie per questo suggerimento. E se vogliamo un testo diverso per prodotto, come?
Ciao Brice,
In questo caso, aggiungi un testo diverso sul nuovo prodotto WooCommerce.
Eccellente !! Grazie per questo suggerimento.
di niente.