[Thủ Thuật WP] Hiển thị thumbnail gallery của sản phẩm trong Archive Page

Code snippet  WordPress cho tính năng hiển thị thumbnail gallery của sản phẩm ra bên ngoài sản phẩm, với hiệu ứng hover thay đổi ảnh. 

Bước 1 - Thêm code vào functions.php

function isures_2718_get_thumb_gallery_archive()
{
    global $product;
    $product_cat =  get_the_terms($product->get_ID(), 'product_cat' );
    // var_dump($product_cat);
    if ( $product_cat && ! is_wp_error( $product_cat ) ) {
    echo '<span class="isures-cate--label"><a href=' . esc_url( get_category_link( $product_cat[0]->term_id ) ) . ' title="Danh mục '.$product_cat[0]->name.'">' . $product_cat[0]->name . '</a></span>';
    }
    $attachment_ids = $product->get_gallery_image_ids();
    $count = count($attachment_ids);
    if ($attachment_ids) {
        $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($product->get_ID()));
        $size_full = wp_get_attachment_image_src(get_post_thumbnail_id($product->get_ID()), "full");
        echo '<div class="isures-thumb--wrap">';
        echo '<div class="isures-thumb--items active"><img src="' . $thumbnail[0] . '" data-full="' . $size_full[0] . '"></div>';
        $i = 0;
        foreach ($attachment_ids as $attachment_id) {
            if ($i < 3) {
                echo '<div class="isures-thumb--items">';
                echo '<img src="' . wp_get_attachment_image_src($attachment_id, 'thumbnail')[0] . '" data-full="' . wp_get_attachment_image_src($attachment_id, 'full')[0] . '">';
                echo '</div>';
            }
            if ($i == 3) {
                echo '<a class="isures-more--btn" href="' . get_permalink() . '"><span>Xem thêm + ' . ($count - $i) . '</span></a>';
            }
 
 
            $i++;
        }
 
        echo '</div>';
    }
}
add_action('woocommerce_before_shop_loop_item', 'isures_2718_get_thumb_gallery_archive');

Bước 2 - Thêm đoạn code Javascript 

Bạn có thể chèn vào file js của theme 

jQuery('body').on('mouseenter', '.isures-thumb--items', function () {
 
        let change_box = jQuery(this).closest('.product-small');
        let img_this = jQuery(this).find('img').attr('data-full');
        jQuery(change_box).find('.box-image img').attr('src', img_this);
        jQuery(change_box).find('.box-image img').attr('srcset', img_this);
        jQuery(change_box).find('.isures-thumb--items').removeClass('active');
        jQuery(this).addClass('active');
    });

Hoặc bạn chèn trực tiếp vaof footer thông qua hook của WordPress trong file functions.php

add_action('wp_footer','isures_add_script_footer');


function isures_add_script_footer(){
jQuery('body').on('mouseenter', '.isures-thumb--items', function () {


        let change_box = jQuery(this).closest('.product-small');
        let img_this = jQuery(this).find('img').attr('data-full');
        jQuery(change_box).find('.box-image img').attr('src', img_this);
        jQuery(change_box).find('.box-image img').attr('srcset', img_this);
        jQuery(change_box).find('.isures-thumb--items').removeClass('active');
        jQuery(this).addClass('active');
    });
}

Bước 3 - Thêm đoạn code style 

Bây giờ bạn bỏ style vào trong file style hoặc dùng hook để chèn như đoạn js trên.

add_action('wp_footer','isures_add_script_footer');


function isures_add_script_footer(){
jQuery('body').on('mouseenter', '.isures-thumb--items', function () {


        let change_box = jQuery(this).closest('.product-small');
        let img_this = jQuery(this).find('img').attr('data-full');
        jQuery(change_box).find('.box-image img').attr('src', img_this);
        jQuery(change_box).find('.box-image img').attr('srcset', img_this);
        jQuery(change_box).find('.isures-thumb--items').removeClass('active');
        jQuery(this).addClass('active');
    });
}