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

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 flatsomea-z sẽ hướng dẫn cho các bạn một cách để làm được điều đó siêu đơn giản.

Cách hiển thị gallery của sản phẩm ra ngoài trang chủ
Cách hiển thị gallery của sản phẩm ra ngoài trang chủ

[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_title nhé!

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 ^^

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

  1. văn hiệu says:

    AD ơi mình làm theo như hình nhỏ nó đè lên tiêu đề và giá sản phẩm có thể giúp mình đoạn css được không

Trả lời

Email của bạn sẽ không được hiển thị công khai.