Get thumbnail gallery product in archive – Show thumbnail on home

Ready to make a web page that shows images to the home page, so share the feature of displaying the product’s gallery outside the product, with a hover effect to change the image.

Get thumbnail gallery product in archive – Show thumbnail on home

I’m working with the Flatssome theme, you can put the following code in the function.php theme you are using – I encourage you to work on Child-themes.

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
}

after adding the css again it’s ok

Maybe your css is a bit different, you can check and change the class accordingly

Good luck

by : https://flatsome.xyz/get-thumbnail-gallery-product-in-archive.html