Show thumbnail gallery product in archive ảnh gallery cho sản phẩm
Copy code sau vào file function.php của theme.
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');Tiếp tục viết vài dòng js để xử lý sự kiện khi hover vào thumbnail.
Nếu dùng flatsome : Flatsome > Advanced > copy code bên dưới bỏ vào footer 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'); });Những theme khác có thể hook vào footer như sau và bỏ vào function.php của theme.
add_action('wp_footer','isures_add_script_footer');function isures_add_script_footer(){?><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}Oke khá ngon rồi. Bây giờ style 1 tẹo cho nó nuột với code bên dưới. Bỏ zô style.css của theme.
.product-small.col > .col-inner { padding-bottom: 60px; border: 1px solid #f5f5f5; border-radius: 5px; background: #fff; box-shadow: 0 3px 11px rgb(0 0 0 / 7%);}.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;}Tuyệt vời ông mặt trời luôn rồi.
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_title’, ‘isures_2718_get_thumb_gallery_archive’);
add_action(‘wp_footer’,’isures_add_script_footer’);
function isures_add_script_footer(){
?>
<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
}
thành quả
Bình luận