effetto roll-over quando si passa sull'immagine principale del prodotto

Hai realizzato il tuo e-commerce con WooCommerce e ti capita di vedere su siti concorrenti che l’immagine del prodotto cambia quando ci passi sopra con il mouse, mentre il tuo mostra solo l’immagine principale. Vorresti implementare questa possibilità anche nel tuo sito ma non sai come farlo?

Poter visualizzare rapidamente al roll-over anche un’immagine alternativa del prodotto può tornare molto utile a chi sta visitando il tuo catalogo, e fare la differenza a livello di usabilità di un negozio online.
Ovviamente non mi sto riferendo alla pagina del dettaglio di un singolo prodotto, dove qualsiasi e-commerce predispone sempre la possibilità di visualizzare quante immagini si vuole, o tramite uno slider o mediante miniature che si caricano al posto dell’immagine principale. La cosa diventa davvero interessante quando questa possibilità viene resa disponibile anche sulla pagina di elenco di tutti i prodotti.

Se il tuo tema WooCommerce non prevede questa possibilità, sappi che è possibile implementarla con pochissime righe di codice! In questo articolo ti dimostrerò quanto sia semplice fare in modo che anche il tuo negozio WooCommerce possa visualizzare un’immagine alternativa al roll-over sull’immagine principale del prodotto, facendo una piccolissima modifica al file functions.php del tema del tuo sito. Ovviamente esistono plugin, gratuiti o a pagamento, che ti permetteranno di eseguire rapidamente questa integrazione, ma se conosci il mio blog saprai già quanto io preferisca limitare allo stretto necessario l’uso di plugin.

quali immagini usare per sostituire la foto del prodotto al roll-over

Il codice è questo (mettilo nel file functions.php), e la funzione ti permetterà di caricare un’immagine di quelle presenti nella galleria del prodotto di seguito all’immagine principale:

add_action( 'woocommerce_before_shop_loop_item_title', 'add_on_hover_shop_loop_image' );
function add_on_hover_shop_loop_image() {
    $image_id = wc_get_product() -> get_gallery_image_ids()[0];
    if ( $image_id ) {
        echo wp_get_attachment_image( $image_id );
    } else {  // se non ho immagini in galleria replico la featured
        echo wp_get_attachment_image( wc_get_product() -> get_image_id() ); 
    }
}

La funzione add_on_hover_shop_loop_image() verifica la presenza di immagini nella galleria, e in caso non ne trovi replica quella del prodotto per evitare che al passaggio del mouse sulla foto appaia un “buco vuoto”. Nel caso ci fossero invece più immagini disponibili, allora verrebbe comunque presa solamente la prima, nel ordine di come appaiono nel campo di inserimento.

Di per se il trucco è tutto qua, ma senza un piccolo aiutino da parte dei CSS il risultato sarebbe quello di vedere contemporaneamente le due immagini in sequenza.

Per fare in modo che l’immagine presente in galleria possa sostituirsi all’immagine del prodotto quando il mouse attraversa l’area della foto è sufficiente nascondere temporaneamente la seconda immagine, e farla apparire solo al momento del roll-over.

Anche in questo caso la modifica al codice è davvero minima. Ti basterà editare il file styles.css del tuo tema ed aggiungere queste poche righe di codice:

.woocommerce ul.products li.product a img:nth-of-type(2) {
	position:absolute; visibility:hidden;
}
.woocommerce ul.products li.product a:hover img:nth-of-type(2) {
	position:relative; visibility:visible;
}
.woocommerce ul.products li.product a:hover img:nth-of-type(1) {
	position:absolute; visibility:hidden;
}

Avremmo potuto più semplicemente usare la proprietà CSS “display” per nascondere l’immagine che non deve apparire fino al roll-over sull’immagine principale del prodotto, ma siccome i moderni browser si sono fatti furbi e in caso di “display:none” caricano il codice di un’immagine ma non l’immagine stessa, allora il risultato sarebbe stato quello di avere un leggero ritardo di caricamento al primo passaggio sulla foto del prodotto (una volta poi che l’immagine secondaria è nella cache del browser questo fastidioso problema di visualizzazione non si ripeterebbe più).

Ecco fatto, ora anche le pagine di archivio del tuo negozio WooCommerce presentano un’immagine secondaria quando navigando il mouse passa sull’immagine del prodotto.

Se ti è piaciuto questo articolo puoi farmi un favore condividendolo, e magari anche commentandolo, usando uno degli appositi link social sottostanti!

se ti piace questa pagina condividila