Sẳn làm 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, với hiệu ứng hover thay đổi ảnh.
Get thumbnail gallery product in archive – Show thumbnail ra trang chủ
Thống kê bài viết

Demo : https://noithatthangloi.com.vn
Tớ đang làm với theme Flatssome , bạn bỏ code sau vào function.php theme bạn đang dùng – Khuyến khích anh em làm trên Child-themes nhé
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' ); // 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 } |
sau khi thêm css lại là ok
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; } |
Có thể css bạn hơi khác bạn có thể check lại và thay class cho phù hợp nhé
CÓ THỂ BẠN QUAN TÂM
- Giảm 50% theme bất kỳ trên Chowebs.com cho anh em 09/2023
- Code tạo random bài viết wordpress dùng code đơn giản 09/2023
- Chỉnh độ rộng Sidebar trong Theme Flatsome 2021 09/2023
- Theme Flatsome mới nhất Flatsome 3.17.0 09/2023
- [Hỏi – Đáp] DataTables – jQuery Plugin quản lý table tuyệt hảo 09/2023
- Coupon mới giảm giá 80% Hosting tại StableHost 09/2023
Chúc bạn thành công
Pingback: Code thêm thời gian đọc bài cho wordpress - FLATSOME - FREE EVERY THING