[Hướng dẫn] Cách hiển thị gallery của sản phẩm ra ngoài trang chủ

Hiển thị ảnh thumnail của sản phẩm phía dưới ảnh đại diện trên trang chủ là một vấn đề cũng khá nhiều bạn đang tìm giải pháp. Điều này cũng không phải quá khó, hôm nay MKTShare sẽ hướng dẫn cho các bạn một cách để làm được điều đó siêu đơn giản.

[Hướng dẫn] Cách hiển thị gallery của sản phẩm ra ngoài trang chủ

Bước 1: Copy code vào functions.php

Các bạn copy và paste đoạn code sau vào functions.php nhé

function create_gallery_product_box_congdongblog()
{
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_title', 'create_gallery_product_box_congdongblog');

add_action('wp_footer','add_script_footer_gallery');

function add_script_footer_gallery(){
?>
<script>
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');
});

</script>
<?php
}

** Lưu ý: Code trên sẽ hiển thị gallery ở dưới ảnh đại diện, nếu bạn muốn hiển thị ở chổ khác hay bất kỳ nơi nào, bạn có thể thay hook bạn muốn vào chổ woocommerce_before_shop_loop_item_titlenhé!

Bước 2: Code CSS hiển thị gallery

Các bạn copy và paste đoạn code sau vào style.css của child theme hoặc Giao diện > Tuỳ biến > Add CSS nhé

.isures-thumb--wrap {
position: absolute;
bottom: 0;
display: flex;
}
.isures-thumb--items{
max-width: calc(25% - 4px);
width: 100%;
margin-right: 5px;
cursor: pointer;
}
.isures-thumb--items:nth-child(4){margin-right: 0}
.isures-thumb--items.active{
border: 1px solid var(--isures-primary-color)
}
.isures-thumb--items img {
border: 1px solid transparent
}
.isures-more--btn {
position: absolute;
right: 0;
bottom: 0;
width: 25%;
height: 100%;
background: rgba(0,0,0, .54);
color: #fff!important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.isures-more--btn span{font-size: 10px;text-align: center; font-weight: bold;}

Lưu lại là xong, thử xoá cache, F5 lại trang chủ xem thành quả nhé!

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