Get thumbnail gallery product in archive – Show thumbnail ra trang chủ

Sẳn khiến cho web có show hình ra trang chủ nên share lại Tính năng hiển thị gallery của sản phẩm ra bên ngoài sản phẩm, có hiệu ứng hover đổi thay ảnh.

Get thumbnail gallery product in archive – Show thumbnail ra trang chủ

Get thumbnail gallery product in archive – Show thumbnail ra trang chủ

Demo : https://noithatthangloi.com.vn

Tớ đang khiến cho sở hữu theme Flatssome , bạn bỏ code sau vào function.php theme bạn đang tiêu dùng – Khuyến khích anh em khiến cho trên Child-themes nhé

<br /> function work_get_thumb_gallery_archive()<br /> <br /> global $product;<br /> $product_cat = get_the_terms($product->get_ID(), 'product_cat' );<br /> // var_dump($product_cat);<br /> if ( $product_cat && ! Is_wp_error( $product_cat ) ) <br /> echo '';<br /> <br /> $attachment_ids = $product->get_gallery_image_ids();<br /> $count = count($attachment_ids);<br /> if ($attachment_ids) <br /> $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($product->get_ID()));<br /> $size_full = wp_get_attachment_image_src(get_post_thumbnail_id($product->get_ID()), "full");<br /> echo '<div class="thumb--wrap">';<br /> echo '<div class="thumb--items active"><img src="'%20.%20$thumbnail[0]%20.%20'" data-full="' . $Size_full[0] . '"≫≪/div>';<br /> $i = 0;<br /> foreach ($attachment_ids as $attachment_id) <br /> if ($i < 3) <br /> echo '<div class="thumb--items">';<br /> echo '<img src="'%20.%20wp_get_attachment_image_src($attachment_id,%20'thumbnail')[0]%20.%20'" data-full="' . Wp_get_attachment_image_src($attachment_id, 'full')[0] . '"≫';≪br /> echo '</div>';<br /> <br /> if ($i == 3) <br /> echo '<a class="more--btn" href="'%20.%20get_permalink()%20.%20'"><span>Xem thêm + ' . ($Count - $i) . '≪/Span></a>';<br /> </p> <p> $i++;<br /> </p> <p> echo '</div>';<br /> <br /> <br /> add_action('woocommerce_before_shop_loop_item', 'work_get_thumb_gallery_archive');<br /> add_action('wp_footer','add_script_footer');<br /> function add_script_footer()<br /> ?><br /> <script><br /> jQuery('body').on('mouseenter', 'thumb--items', function () </p> <p> let change_box = jQuery(this).closest('.product-small');<br /> let img_this = jQuery(this).find('img').attr('data-full');<br /> jQuery(change_box).find('.box-image img').attr('src', img_this);<br /> jQuery(change_box).find('.box-image img').attr('srcset', img_this);<br /> jQuery(change_box).find('.thumb--items').removeClass('active');<br /> jQuery(this).addClass('active');<br /> );</p> <p></script><br /> <?php<br />

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

function work_get_thumb_gallery_archive() global $product; $product_cat = get_the_terms($product->get_ID(), 'product_cat'<span%20class="crayon-h"> ); // var_dump($product_cat); if ( $product_cat && ! Is_wp_error( $product_cat ) ) echo ''<span%20class="crayon-sy">; $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">'<span%20class="crayon-sy">; echo '<div class="thumb--items active"><img src="'<span%20class="crayon-h"> . $Thumbnail[0] . '" Data-full="'<span%20class="crayon-h"> . $Size_full[0] . '"≫≪/div>'<span%20class="crayon-sy">; $i = 0; foreach ($attachment_ids as $attachment_id) if ($i < 3) echo '<div class="thumb--items">'<span%20class="crayon-sy">; echo '<img src="'<span%20class="crayon-h"> . Wp_get_attachment_image_src($attachment_id, 'thumbnail'<span%20class="crayon-sy">)[0] . '" Data-full="'<span%20class="crayon-h"> . Wp_get_attachment_image_src($attachment_id, 'full'<span%20class="crayon-sy">)[0] . '"≫'≪span%20class="crayon-sy">; echo '</div>'<span%20class="crayon-sy">; if ($i == 3) echo '<a class="more--btn" href="'<span%20class="crayon-h"> . Get_permalink() . '"≫≪span>Xem thêm + '<span%20class="crayon-h"> . ($Count - $i) . '≪/Span></a>'<span%20class="crayon-sy">; $i++; echo '</div>'<span%20class="crayon-sy">; add_action('woocommerce_before_shop_loop_item'<span%20class="crayon-i ">, 'work_get_thumb_gallery_archive'<span%20class="crayon-sy">); add_action('wp_footer'<span%20class="crayon-i ">,'add_script_footer'<span%20class="crayon-sy">); function add_script_footer() ?> <script> jQuery('body'<span%20class="crayon-sy">).on('mouseenter'<span%20class="crayon-sy">, 'thumb--items'<span%20class="crayon-sy">, function () let change_box = jQuery(this).closest('.product-small'<span%20class="crayon-sy">); let img_this = jQuery(this).find('img'<span%20class="crayon-sy">).attr('data-full'<span%20class="crayon-sy">); jQuery(change_box).find('.box-image img'<span%20class="crayon-sy">).attr('src'<span%20class="crayon-sy">, img_this); jQuery(change_box).find('.box-image img'<span%20class="crayon-sy">).attr('srcset'<span%20class="crayon-sy">, img_this); jQuery(change_box).find('.thumb--items'<span%20class="crayon-sy">).removeClass('active'<span%20class="crayon-sy">); jQuery(this).addClass('active'<span%20class="crayon-sy">); ); </script> <?php

sau lúc thêm css lại là ok

<br /> .box-image <br /> position: relative;<br /> height: 270px;<br /> margin: 0 auto;<br /> overflow: hidden;<br /> width: 100%;<br /> background-size: cover;<br /> <br /> .thumb--items <br /> max-width: calc(25% - 4px);<br /> width: 100%;<br /> margin-right: 5px;<br /> cursor: pointer;<br /> margin-bottom: 60px;<br /> z-index: 99;<br /> background-color: #c69c6d;<br /> padding: 5px;<br /> <br /> .thumb--items.active <br /> border: 1px solid #c31010;<br /> <br /> .box-text.box-text-products <br /> background-color: #c69c6d;<br /> margin-top:55px<br /> <br /> .thumb--wrap <br /> position: absolute;<br /> bottom: 0;<br /> display: flex;<br /> background-color: #c69c6d;<br /> <br /> .woocommerce-loop-product__title a <br /> color: white;<br />

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

.box-image position: relative; height: 270px; margin: 0 auto; overflow: hidden; width: 100%; background-size: cover; .thumb--items max-width: calc(25% - 4px); width: 100%; margin-right: 5px; cursor: pointer; margin-bottom: 60px; z-index: 99; background-color: #c69c6d; padding: 5px; .thumb--items.active border: 1px solid #c31010; .box-text.box-text-products background-color: #c69c6d; margin-top:55px .thumb--wrap position: absolute; bottom: 0; display: flex; background-color: #c69c6d; .woocommerce-loop-product__title a color: white;

sở hữu thể css bạn hơi khác bạn sở hữu thể check lại và thay class cho thích hợp nhé

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

Theo : Thủ Thuật Flatsome.xyz