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 gli altri che abbiamo WooCommerce. Oggi vi mostreremo come dare un'animazione diversa ai vostri prodotti WooCommerce.

A volte lo stile di WooCommerce potrebbe essere un po' inadeguato, soprattutto 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:

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 visitato un sito che conteneva un testo sul prodotto in bilico. Ovviamente ho visto altri siti di e-commerce che hanno parole piuttosto che icone sul prodotto in bilico, quindi questo non era un concetto nuovo. Non avevo mai dovuto farlo su a Tema Divi, e quando l'ho visto, mi sono proposto una sfida e mi sono reso conto che è davvero facile implementarlo. Con pochissimo codice richiesto, sei sicuro di non influire sulle 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.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" vuoto "layout =" espanso "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "piatto" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] SCARICA IL TEMA DIVI [/ vcex_button] [/ width_column] [» [vc_column] » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "vuoto" layout = "espanso" align = "centro" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] SCARICA MODELLI DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Altri tutorial di Divi