WooCommerce in DIVI: mostra un testo invece di un'icona quando passi il mouse sopra un prodotto

by

Molti di voi mi hanno chiesto altri tutorial per personalizzare WooCommerce in DIVI.

In questo tutorial spiego come fare i primi passi con il modulo WooCommerce in DIVI

Sto preparando una serie di tutorial per poter personalizzare il nostro negozio con WooCommerce, restate sintonizzati 😉

In questo tutorial ti mostrerò come visualizzare un testo invece di un'icona quando passi il mouse sopra un prodotto.

Per impostazione predefinita in DIVI quando si passa il mouse su un prodotto viene visualizzata un'icona:

passa il mouse sull'icona woocommerce divi

In questo tutorial imparerai come cambiarlo in un colore di testo e sfondo simile a questo:

testo hover woocommerce divi

Per seguire il tutorial ti serve il template DIVI, da cui puoi acquistarlo qui o se sei un membro premium Lo hai disponibile gratuitamente nell'area membri.

Ecco il video tutorial:

Iscriviti a un canale mi:  

La prima cosa che faremo è modificare il modulo WooCommerce dal builder DIVI, andare alla scheda Design e cambiare il colore nell'opzione "Colore livello sovrapposto al passaggio del mouse".

Con un cursore scegli la tonalità di colore specifica che desideri e con l'altro la trasparenza:

modulo divi store

Con questa impostazione cambiamo il colore di sfondo al passaggio del mouse:

divi store al passaggio del mouse

Per cambiare l'icona in un testo dobbiamo aggiungere il seguente codice in Divi–> Opzioni tema –> CSS personalizzato.

.woocommerce .et_overlay:before {
    left: 0;
    margin-left: 0;
    content: 'ver';
    /*** TEXTO ***/
    font-family: 'Source Sans Pro', Arial !important;
    /*** ELEGIR FUENTA DE TEXTO ***/
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
    /*** COLOR DE TU TEXTO ***/
    font-weight: bold;
    text-align: center;
    width: 100%;
    padding: 5px 0;
}

Nel codice puoi vedere che il testo che appare nell'opzione contenuto è quello che apparirà.

Lascia un commento