Visualizza due immagini del prodotto nelle pagine di archivio

INFORMAZIONI SULLO SNIPPET

Hai mai sentito il bisogno di visualizzare più di un’immagine di un prodotto direttamente nelle pagine di archivio? Probabilmente hai notato che con le impostazioni predefinite di WooCommerce questa funzionalità non è disponibile. Utilizzando questo breve codice, quando l’utente passerà il mouse sull’immagine del prodotto, questa verrà sostituita da una seconda immagine.

PHP
/*
* Snippet Name:     Visualizza due immagini del prodotto nelle pagine di archivio.
* Snippet Author:   Matteo De Maria
*/
add_action('woocommerce_before_shop_loop_item_title', 'add_on_hover_shop_loop_image');

function add_on_hover_shop_loop_image() {
    $image_ids = wc_get_product()->get_gallery_image_ids();

    if (!empty($image_ids)) {
        $image_id = $image_ids[0]; // Utilizza l'ID della prima immagine della galleria
    } else {
        $image_id = wc_get_product()->get_image_id(); // Utilizza l'ID dell'immagine principale se la galleria è vuota
    }

    if ($image_id) {
        echo wp_get_attachment_image($image_id, 'full');
    }
}

Copia il codice nel file functions.php del tuo tema child attivo o utilizza il plugin Code Snippets.

CSS
/*Seconda immagine prodotto*/
.woocommerce ul.products li.product a img:nth-of-type(2) {
    display: none;
}
.woocommerce ul.products li.product a:hover img:nth-of-type(2) {
    display: block
}
.woocommerce ul.products li.product a:hover img:nth-of-type(1) {
    display: none;
}

Aggiungi questo CSS nel tuo tema.

Lascia un commento

I commenti non pertinenti allo snippet o offensivi non verranno approvati.

Se desideri condividere del codice, per favore fallo in questo modo: [php]il tuo codice[/php].

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

DMM WEB DESIGN
Questo sito utilizza cookie tecnici e di profilazione. Cliccando su accetta si autorizzano tutti i cookie di profilazione. Cliccando su rifiuta o la X si rifiutano tutti i cookie di profilazione. Cliccando su personalizza è possibile selezionare quali cookie di profilazione attivare.