Hướng Dẫn Tạo Hiệu Ứng Ánh Sáng Khi Hover Ảnh Sản Phẩm Woocommerce

Giới thiệu

Trong bối cảnh thương mại điện tử ngày càng phát triển, việc tối ưu hóa trải nghiệm người dùng trên các cửa hàng trực tuyến là vô cùng quan trọng. Hôm nay, tôi sẽ hướng dẫn các bạn cách tạo hiệu ứng ánh sáng lấp lánh khi người dùng di chuột qua ảnh sản phẩm trên nền tảng Woocommerce sử dụng theme Flatsome.

Điều kiện và Yêu cầu

Để áp dụng thành công hiệu ứng này, website của bạn cần đáp ứng những yêu cầu sau:

Nền tảng: WordPress phiên bản 5.1 trở lên
Theme: Flatsome
Plugin: Woocommerce

Nếu hệ thống của bạn đã sẵn sàng, hãy bắt đầu thực hiện theo các bước dưới đây.

Quy trình Thiết lập Hiệu ứng

Bước 1: Sao chép CSS

Đầu tiên, bạn cần sao chép đoạn code CSS dưới đây. Đảm bảo rằng bạn không bỏ sót bất kỳ dòng nào để hiệu ứng có thể hoạt động chính xác.

.product-small .box-image:hover::before{
  -webkit-animation:shine .75s;
  animation:shine .75s
}

@-webkit-keyframes shine{
  100%{left:125%}
}

@keyframes shine{
  100%{left:125%}
}

.product-small .box-image::before{
  position:absolute;
  top:0;
  left:-75%;
  z-index:2;
  display:block;
  content:'';
  width:50%;
  height:100%;
  background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
  background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
  -webkit-transform:skewX(-25deg);
  transform:skewX(-25deg)
}

Bước 2: Dán CSS vào Website

Tiếp theo, truy cập vào mục Giao diện > Tùy biến > Style > Custom CSS trong dashboard của WordPress và dán đoạn CSS đã sao chép vào đây.

Bước 3: Lưu và Kiểm tra Kết Quả

Sau khi đã dán xong, đừng quên lưu lại thay đổi. Bây giờ, bạn có thể truy cập vào trang chủ hoặc bất kỳ trang lưu trữ sản phẩm nào để kiểm tra hiệu ứng mới đã được áp dụng.

Kết Luận

Hy vọng với hướng dẫn này, bạn có thể dễ dàng tạo thêm tính năng thú vị này cho website của mình, góp phần nâng cao trải nghiệm người dùng. Nếu có bất kỳ thắc mắc hay vấn đề nào phát sinh, đừng ngần ngại để lại bình luận phía dưới. Chúc các bạn thành công!