ĐẶT CÂU HỎI

Hover hiển thị thông tin sản phẩm dạng Tooltip cho Woocommerce

flatsome
27/01/22
1
Hover hiển thị thông tin sản phẩm dạng Tooltip cho Woocommerce

Làm thế nào để khách hàng xem website của các bạn trên trang cửa hàng có thể Hover hiển thị thông tin sản phẩm cụ thể hơn. Trong bài viết này chúng tôi sẽ hướng dẫn cụ thể để hiển thị thông tin ra khi khách hàng di chuột Hover Tooltip đẹp mắt

Hover hiển thị thông tin sản phẩm dạng Tooltip cho Woocommerce

Hover hiển thị thông tin sản phẩm dạng Tooltip cho Woocommerce
Hover hiển thị thông tin sản phẩm dạng Tooltip cho Woocommerce

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.

 

Đầ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.
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.

Hàm the_title để lấy tên sản phẩm và get_the_excerpt để lấy mô tả ngắn sản phẩm ra ngoài.
Bây giờ hãy tiến hàng viết css và js để ẩn nó đi. Chỉ hiển thị khi khách hàng di chuột hover.

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. Bạn cần tính năng field textfield select .

Note : đó là ví dụ , bạn có thể dùng thể DIV hoặc Span để định dạng tốt hơn – Phải biết css chút 🙂

sau khi thêm xong bạn css là ok

thêm Java để hiện thị nhé

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 chủ đề trẻ em ( child themes ).

 

Xong rồi !

Như vậy là xong rồi đó các bạn giờ hãy thưởng thức thành quả và tận hưởng, có bất kỳ thắc mắc hay nhu cầu cao cấp hơn cho chức năng này hãy liên hệ với chúng tôi

 

Chúc các bạn thành công 🙂

Điểm 5/5 - ( Có 3 bình chọn)

One thought on “Hover hiển thị thông tin sản phẩm dạng Tooltip cho Woocommerce

  1. Pingback: Hover hiển thị thông tin sản phẩm dạng Tooltip cho Woocommerce - FLATSOME - FREE EVERY THING

Comments are closed.