Get thumbnail gallery product in archive

Sẳn làm web có show hình ra trang chủ nên share lại Tính năng hiển thị 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.

Get thumbnail gallery product in archive – Show thumbnail ra trang chủ

Thống kê bài viết

Demo : https://noithatthangloi.com.vn

Tớ đang làm với theme Flatssome , bạn bỏ code sau vào function.php theme bạn đang dùng – Khuyến khích anh em làm trên Child-themes nhé

function work_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 '';
    }
    $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="thumb--wrap">';
        echo '<div class="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="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="more--btn" href="' . get_permalink() . '"><span>Xem thêm + ' . ($count - $i) . '</span></a>';
            }
 
 
            $i++;
        }
 
        echo '</div>';
    }
}
add_action('woocommerce_before_shop_loop_item', 'work_get_thumb_gallery_archive');
add_action('wp_footer','add_script_footer');
function add_script_footer(){
?>
<script>
jQuery('body').on('mouseenter', '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('.thumb--items').removeClass('active');
        jQuery(this).addClass('active');
    });
 
</script>
<?php
}

function work_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 '';

}

$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="thumb--wrap">';

echo '<div class="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="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="more--btn" href="' . get_permalink() . '"><span>Xem thêm + ' . ($count - $i) . '</span></a>';

}

$i++;

}

echo '</div>';

}

add_action('woocommerce_before_shop_loop_item', 'work_get_thumb_gallery_archive');

add_action('wp_footer','add_script_footer');

function add_script_footer(){

jQuery('body').on('mouseenter', '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('.thumb--items').removeClass('active');

jQuery(this).addClass('active');

});

</script>

<?php

}

sau khi thêm css lại là ok

.box-image {
    position: relative;
    height: 270px;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    background-size: cover;
}
.thumb--items {
    max-width: calc(25% - 4px);
    width: 100%;
    margin-right: 5px;
    cursor: pointer;
    margin-bottom: 60px;
    z-index: 99;
    background-color: #c69c6d;
    padding: 5px;
}
.thumb--items.active {
    border: 1px solid #c31010;
}
.box-text.box-text-products {
    background-color: #c69c6d;
	margin-top:55px
}
.thumb--wrap {
    position: absolute;
    bottom: 0;
    display: flex;
    background-color: #c69c6d;
}
.woocommerce-loop-product__title a {
    color: white;
}

.box-image {

position: relative;

height: 270px;

margin: 0 auto;

overflow: hidden;

width: 100%;

background-size: cover;

}

.thumb--items {

max-width: calc(25% - 4px);

width: 100%;

margin-right: 5px;

cursor: pointer;

margin-bottom: 60px;

z-index: 99;

background-color: #c69c6d;

padding: 5px;

}

.thumb--items.active {

border: 1px solid #c31010;

}

.box-text.box-text-products {

background-color: #c69c6d;

margin-top:55px

}

.thumb--wrap {

position: absolute;

bottom: 0;

display: flex;

background-color: #c69c6d;

}

.woocommerce-loop-product__title a {

color: white;

}

Có thể css bạn hơi khác bạn có thể check lại và thay class cho phù hợp nhé

CÓ THỂ BẠN QUAN TÂM

Chúc bạn thành công

Điểm 5/5 - ( Có 8 bình chọn)

Get thumbnail gallery product in archive – Show thumbnail ra trang chủ 09/2023

Get thumbnail gallery product in archive – Show thumbnail ra trang chủ

CÓ THỂ BẠN QUAN TÂM

Các tin khác

One thought on “Get thumbnail gallery product in archive – Show thumbnail ra trang chủ 09/2023”

Interdata Khuyến mãi tháng 07-2023 giảm 81% cho host quá đỉnh anh em 09/2023

Top 5 công cụ kiểm tra lịch sử tên miền hiệu quả 09/2023

Cách mua tên miền trên Google Domains giá cực tốt 09/2023

Đăng ký tên miền quốc gia với .IO.VN, .AI.VN và .ID.VN cực chất 09/2023

NVME PREMIUM HOSTING GIÁ RẺ VÀ CHẤT LƯỢNG CỦA INTERDATA 09/2023

Host đề xuất