Show thumbnail gallery product in archived

Working fine with Flatsome theme

Demo

PHP

function xso_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="xso-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="xso-thumb--wrap">';
        echo '<div class="xso-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="xso-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="xso-more--btn" href="' . get_permalink() . '"><span>Xem thêm + ' . ($count - $i) . '</span></a>';
            }
 
 
            $i++;
        }
 
        echo '</div>';
    }
}
add_action('woocommerce_before_shop_loop_item', 'xso_get_thumb_gallery_archive');

JS

Flatsome - Footer script

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

Another theme - function.php

CSS

.xso-thumb--wrap {
    position: absolute;
    bottom: 0;
    display: flex;
}
.xso-thumb--items{
    max-width: calc(25% - 4px);
    width: 100%;
    margin-right: 5px;
    cursor: pointer;
}
.xso-thumb--items:nth-child(4){margin-right: 0}
.xso-thumb--items.active{
    border: 1px solid var(--isures-primary-color)
}
.xso-thumb--items img {
    border: 1px solid transparent
}
.xso-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;
}
.xso-more--btn span{font-size: 10px;text-align: center; font-weight: bold;}