Flatsome là một trong những theme có khả năng tùy biến rất cao, tuy nhiên giao diện mặc định của theme này nhìn khá củ chuối và để tùy biến lại thì cần các bạn biết một chút về code. Chứ không phải dạng kéo thả ăn ngay như các theme khác.
Trong bài viết này mình sẽ giới thiệu đến các bạn tổng hợp các hook được sử dụng phổ biến để tùy biến khung sản phẩm hay còn được gọi là Product Box
Trước tiên mình sẽ giải thích Product box là phần nào ? để hình dung product box là phần nào của theme thì các bạn nhìn hình dưới đây nhé.
Nói dễ hiểu hơn thì Product box chính là nơi hiển thị các thông tin cơ bản về sản phẩm như: Title, tên danh mục, số sao đánh giá, giá sản phẩm, giảm giá, quick view, add to cart …
1. Product box imgage
Hook flatsome_product_box_tools_top
Hook này sẽ xuất hiện ở góc trái trên cùng của ảnh đại diện sản phẩm. Hiện đang hiển thị thằng wishlist
Hook flatsome_product_box_tools_bottom
Vị trí hiển thị hook flatsome_product_box_tools_bottom là góc dưới cùng của ảnh sản phẩm như hình dưới:
Để gọi ra được 2 thằng hook này ra thì chúng ta sẽ sử dụng ACF để tạo 2 field nhập thông tin trong sản phẩm. Sau đó sử dụng hàm add_action để móc ra
Thêm đoạn code này vào trong file functions trong child themes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
add_action('flatsome_product_box_tools_top','noi_bat_top_right'); function noi_bat_top_right(){ global $product; $trang_thai = get_field('trang_thai_sp',$product->get_id()); if($trang_thai){ ?> <div class="like-count hidden-xs hidden-sm"><div class="like-count-layout"><div class="like-count-content"><?php echo $trang_thai; ?></div></div></div> <?php } } add_action('flatsome_product_box_tools_bottom','noi_bat_bottom'); function noi_bat_bottom(){ global $product; $trang_thai = get_field('trang_thai',$product->get_id()); if($trang_thai){ echo '<div class="trang_thai_div">'.$trang_thai .'</div>'; } } |
Trong đó:
- noi_bat_top_right: tên thuộc tính ( hiển thị trên cùng góc phải )
- noi_bat_bottom: tên thuộc tính ( hiển thị dưới cùng khung image )
- trang_thai_sp: là field name mà bạn đặt trong ACF
- trang_thai_div: là field name mà bạn đặt trong ACF
- like-count, like-count-layout: là các thẻ div mà bạn sẽ CSS lại cho đẹp hơn
Sau đó CSS lại cho nó nhìn đẹp và nổi bật hơn bằng cách thêm đoạn code vào file CSS.
|
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 52 53 54 |
.product-small .show-on-hover.top.right{ top:3px; right:3px; opacity:1 !important; min-width:18em !important; display:block; } .product-header{ border-top:1px solid #ccc } .product-small .show-on-hover.bottom.left{ opacity:1 !important; background: rgba(0,0,0,0.6); color: #ffffff; width:100%; text-align:center; padding:0px !important; } .product-small .show-on-hover.bottom.left:blank{ opacity:0 !important; } .product-small .show-on-hover.bottom.left .trang_thai_div{ height:32px; padding:6px; } .like-count { visibility:visible!important; opacity:1 !important; position: absolute; top: 0; right: 0; min-width:8em; height: 4em; } .like-count-layout { position: relative; height: 100%; width: 100%; } .like-count-content { background: rgba(0,0,0,0.6); color: #FFFFFF; text-align: center; height: 2.5em; padding-left:4px; padding-right:4px; float:right; line-height: 2.5em; font-size: 1em; } |
Hook flatsome_product_box_actions
Hook này hiện tại của flatsome đang là nút mua hàng, quick view. Bạn nào muốn tùy biến nút mua hàng thì hoàn toàn có thể can thiệp hook này.
Hook flatsome_woocommerce_shop_loop_images.
Hook được gắn vào vị trí thumnail.
2. Product box text
Phần này sẽ gồm có 4 hook.
Hook woocommerce_before_shop_loop_item_title
Hook này sẽ hiển thị các thông tin phía trước của title.
Trong ví dụ trên mình sẽ thêm vào hiệu ứng slide ảnh thumb, để làm được như vậy thì bạn thêm đoạn code dưới đây vào file function
|
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 |
add_action('woocommerce_before_shop_loop_item_title', 'isures_2718_get_thumb_gallery_archive'); function isures_2718_get_thumb_gallery_archive() { global $product; $attachment_ids = $product->get_gallery_image_ids(); // var_dump($attachment_ids); if ($attachment_ids) { ?> <div class="carousel slider product-box-slider isures-thumb--wrap" data-flickity-options='{ "cellAlign": "left", "imagesLoaded": true, "lazyLoad": 1, "freeScroll": true, "wrapAround": true, "autoPlay": false, "pauseAutoPlayOnHover" : false, "prevNextButtons": true, "contain" : true, "adaptiveHeight" : true, "dragThreshold" : 10, "percentPosition": true, "pageDots": false, "rightToLeft": false, "draggable": true, "selectedAttraction": 0.1, "parallax" : 0, "friction": 0.6 }'> <?php $pThumbid = get_post_thumbnail_id($product->get_ID()); $p_thumbnail_full = wp_get_attachment_image_src( $pThumbid,'full'); $p_thumbnail = get_the_post_thumbnail_url($product->get_ID(), 'shop_catalog'); $p_large = get_the_post_thumbnail_url($product->get_ID(), 'shop_catalog'); echo '<div class="isures-thumb--items active carousel_item" style="width: 23%!important;margin:0 5px;z-index: 999999">'; echo '<img src="'. $p_thumbnail .'" data-width="'. $p_thumbnail_full[1] .'" data-height="'. $p_thumbnail_full[2].'" data-fullsize="'. $p_thumbnail_full[0] .'" data-full="'. $p_large .'" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy" />'; echo '</div>'; $dem = 1; foreach ($attachment_ids as $attachment_id) { if($dem<=3){ echo '<div class="isures-thumb--items carousel_item" style="width: 23%!important;margin:0 5px;z-index: 999999">'; $attachment_image_full = wp_get_attachment_image_src( $attachment_id,'full'); $attachment_image = wp_get_attachment_image_src( $attachment_id,'shop_catalog'); $attachment_image_thumbnail = wp_get_attachment_image_src( $attachment_id,'shop_catalog'); echo '<img style="heigh:75%" src="'. $attachment_image_thumbnail[0] .'" data-width="'. $attachment_image_full[1] .'" data-height="'. $attachment_image_full[2].'" data-fullsize="'. $attachment_image_full[0] .'" data-full="'. $attachment_image[0] .'" class=" attachment-thumbnail size-thumbnail" alt="" loading="lazy" />'; echo '</div>'; $dem++; } } echo '</div>'; } } |
Mình lấy ví dụ như trên để các bạn dễ hình dung, còn lại các bạn muốn tùy biến như thế nào thì sẽ tùy mình nhé.
Hook woocommerce_shop_loop_item_title
Hook này vị trí của nó nằm hay trong title, tức là bên trong thẻ
