• Thông báo
    • Đã có box quảng cáo rao vặt, hãy cẩn thận để không bị banned tài khoản
    • Update 28/12/2016: Yêu cầu các bài rao vặt post sau ngày này cần phải share g+, post nào không share sẽ bị xóa không cần báo trước.
    • Vi phạm quy định 3 lần, sẽ bị xóa bài acc + toàn bộ bài viết

Show thông tin sản phẩm dạng Tooltip cho Woocommerce

ThaiDuong

Administrator
Staff member
Messages
186
Reaction score
2
Points
18
Nhìn ảnh dưới chắc bạn cũng sẽ hiểu Tooltip cho Woocommerce là gì phải không nào

277

Khi khách hàng hover chuột vào sản phẩm thì sẽ hiển thị tooltip chi tiết của sản phẩm cho khách hàng nhìn thấy, cái này trang trí giúp đẹp hơn ý mà.

Đầu tiên chúng có hook như sau

Chúng tôi sử dụng woocommerce_after_shop_loop_item để đưa thông tin mổ tả sản phẩm ra trang của hàng và trang lưu trữ sản phẩm.
Chúng tôi vẫn sử dụng hook được cung cấp bởi Woocommerce, hook này được viết vào file function.php của themes. Code đầy đủ của chúng tôi như sau, và chúng tôi sẽ nói rõ hơn về code ở phía dưới.
PHP:
Vui lòng, Log in hoặc Register để xem nội dung code
Tạo bảng trong mô tả ngắn
Đây là cách làm đơn giản dễ sử dụng nhất với cả người không biết code. Coppy code bên dưới bỏ nó vào tab Text trong soạn thảo mô tả ngắn.

HTML:
Vui lòng, Log in hoặc Register để xem nội dung code
Có một vài trường dữ liệu, bạn cần phải thay thế cho phù hợp dữ liệu của bạn cần hiển thị như tên hãng sản xuất, mã sản phẩm, kích thước,... cuối bài viết mình có đưa ra một số biến, bạn có thể dựa vào đó để viết vào code web của bạn
Đây là css làm đẹp

CSS:
Vui lòng, Log in hoặc Register để xem nội dung code
Đây là js Tooltip

JavaScript:
Vui lòng, Log in hoặc Register để xem nội dung code
Hãy đặt chúng vào hai file css và js riêng biệt và chúng cần được móc vào để hoạt động. Chúng tôi sử dụng hook như sau cho child themes

PHP:
Vui lòng, Log in hoặc Register để xem nội dung code
Một số biến quan trọng, có thể có ích với bạn
Code:
Vui lòng, Log in hoặc Register để xem nội dung code
 
Top