Visualizza due immagini del prodotto nelle pagine di archivio

Visualizza due immagini con effetto hover negli archivi prodotti.
PHP
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');
    }
}
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;
}

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

Lascia un commento

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.