']]}
Sẳn khiến cho web sở hữu 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, với hiệu ứng hover thay đổi ả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 làm mang 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 làm 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 />
|
một
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;
|
có thể css bạn tương đối khác bạn với thể check lại và thay class cho phù hợp nhé
Chúc bạn thành công
Theo : Thủ Thuật Flatsome.xyz
Không có nhận xét nào: