Tổng hợp các Hook Flatsome thường dùng trong Product Box

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é.

Giao diện product box

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:

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.

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

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ẻ

 

Bài viết liên quan

    Liên hệ tư vấn