Khi thiết kế giao diện trang sản phẩm bằng Elementor, một trong những hiệu ứng UX phổ biến nhất là hiển thị nút Add to Cart khi người dùng hover vào vùng sản phẩm. Mặc định Elementor cho phép bạn tạo hiệu ứng hover cho từng widget riêng biệt, nhưng đôi khi bạn cần hiệu ứng hover trên một element ảnh hưởng đến một element khác. Bài viết này hướng dẫn bạn cách tạo hiệu ứng hover giữa hai class CSS khác nhau trong Elementor Pro, áp dụng cho trường hợp hiển thị nút mua hàng khi hover vào sản phẩm.
Tổng quan về hiệu ứng hover khác class trong Elementor
Bình thường khi thiết kế bằng Elementor, mình thường dùng Figma để prototype trước. Nhưng có những lần mình thiết kế trực tiếp trên Elementor luôn và gặp phải bài toán: khách hàng muốn hover vào vùng sản phẩm và nút Add to Cart phải xuất hiện ở một vị trí cụ thể, không phải là đúng vị trí nút đặt sẵn. Đây là một kỹ thuật CSS khá phổ biến trong thiết kế web hiện đại, đặc biệt khi làm template trang sản phẩm cho shop WooCommerce.
Nguyên lý CSS: Hover trên parent ảnh hưởng đến child
Trước khi vào code, mình giải thích nhanh nguyên lý hoạt động. Trong CSS, bạn có thể chọn một element con dựa trên trạng thái hover của element cha bằng selector dạng .parent:hover .child. Nghĩa là khi người dùng di chuột vào vùng chứa class .main-atc, tất cả các element con bên trong có class .add-to-card sẽ bị ảnh hưởng. Đây là kỹ thuật CSS cơ bản nhưng cực kỳ hữu ích khi làm việc với page builder như Elementor.
Đoạn code CSS mình sử dụng rất đơn giản:
/* Content Show/Hide on Hover by BunnyWP */
.add-to-card {
opacity: 0; /* Ẩn nút mặc định */
transition: 0.5s ease-in-out; /* Hiệu ứng mượt mà */
}
.main-atc:hover .add-to-card {
opacity: 1; /* Hiển thị khi hover vào parent */
}Tham khảo thêm: Omnichannel và Multichannel – Làm thế nào để phân biệt hai khái niệm này.
Hướng dẫn chi tiết từng bước trong Elementor
Dưới đây là hướng dẫn chi tiết cách áp dụng đoạn code CSS trên vào Elementor trong Elementor:
Bước 1: Thêm class cho nút Add to Cart
Mình thêm một widget Button vào vị trí mong muốn trên template sản phẩm, sau đó gắn cho nó class CSS add-to-card. Để thêm CSS class trong Elementor:
1. Chọn widget Button bạn vừa tạo
2. Chuyển sang tab Advanced
3. Tìm mục CSS Classes
4. Nhập add-to-card vào ô trống
Bước 2: Thêm class cho vùng chứa sản phẩm
Quay trở ra widget Container (hoặc Section) chứa toàn bộ vùng sản phẩm, thêm class main-atc vào CSS Classes tương tự như bước 1. Đây là element cha sẽ đóng vai trò làm vùng trigger cho hiệu ứng hover.
Bước 3: Thêm CSS vào Custom CSS của Elementor
Bạn có thể thêm đoạn CSS vào một trong ba vị trí:
Cách 1 – Thêm vào Custom CSS của Page: Vào trang chỉnh sửa Elementor, click icon mũi tên ở góc dưới cùng bên trái, chọn Page Settings > Advanced > Custom CSS. Dán đoạn code CSS vào đây. Cách này chỉ áp dụng cho trang hiện tại.
Cách 2 – Thêm vào Site Settings: Vào Elementor > Site Settings > Custom CSS. Cách này áp dụng cho toàn bộ site, phù hợp nếu bạn dùng template sản phẩm ở nhiều trang khác nhau.
Cách 3 – Thêm vào Appearance > Customize > Additional CSS: Cách này áp dụng toàn site và không phụ thuộc vào Elementor, phù hợp cho các thay đổi CSS global.
Với template sản phẩm, mình khuyên dùng Cách 2 (Site Settings) vì code sẽ áp dụng cho mọi trang sử dụng cùng template.
Mở rộng: Các hiệu ứng hover khác với Elementor
Ngoài ẩn/hiện bằng opacity, bạn còn có thể tạo nhiều hiệu ứng hover khác nhau với cùng nguyên lý. Dưới đây là một số ví dụ phổ biến:
Hiệu ứng trượt lên từ dưới (Slide Up)
/* Hiệu ứng trượt lên khi hover */
.add-to-card {
opacity: 0;
transform: translateY(20px);
transition: all 0.4s ease;
}
.main-atc:hover .add-to-card {
opacity: 1;
transform: translateY(0);
}Hiệu ứng zoom nhẹ cho ảnh sản phẩm
/* Zoom ảnh sản phẩm khi hover */
.main-atc .product-image img {
transition: transform 0.5s ease;
}
.main-atc:hover .product-image img {
transform: scale(1.05);
}Hiệu ứng đổi màu nền cho Container
/* Đổi màu nền khi hover */
.main-atc {
transition: background-color 0.3s ease;
}
.main-atc:hover {
background-color: #f5f5f5;
}Troubleshooting: Hiệu ứng không hoạt động?
Nếu sau khi thêm class và CSS mà hiệu ứng không chạy, hãy kiểm tra các vấn đề sau:
1. Sai cấu trúc DOM: Selector .main-atc:hover .add-to-card chỉ hoạt động khi element có class .add-to-card nằm bên trong element có class .main-atc. Nếu hai element này ở cùng cấp (siblings) hoặc không có quan hệ parent-child, CSS sẽ không hoạt động. Hãy dùng Developer Tools của trình duyệt (F12) để kiểm tra cấu trúc HTML.
2. Cache plugin đang chặn: Nếu bạn dùng plugin cache như LiteSpeed Cache, WP Super Cache, hoặc W3 Total Cache, hãy xóa cache sau khi thay đổi CSS. CSS thường được cache agressive, nên thay đổi có thể không hiển thị ngay lập tức.
3. CSS specificity quá thấp: Nếu có CSS khác đang override opacity của nút button (ví dụ Elementor tự thêm inline style), bạn có thể cần thêm !important vào giá trị opacity. Tuy nhiên, hãy dùng !important thận trọng vì nó khó maintain về sau.
4. Thêm class sai vị trí: Trong Elementor, mỗi widget có nhiều nơi để thêm class. Đảm bảo bạn thêm vào đúng ô CSS Classes ở tab Advanced của widget, không phải ở ô Class của animation hay Custom CSS position.
Best practices khi dùng Custom CSS trong Elementor
Dùng class name có ý nghĩa: Thay vì dùng class1, test123, hãy đặt tên class mô tả chức năng như add-to-card, product-card-wrapper, hover-trigger. Điều này giúp code dễ đọc và dễ maintain khi project phức tạp hơn.
Luôn dùng transition: Bất kỳ hiệu ứng nào cũng nên có property transition để tạo chuyển đổi mượt mà. Không có transition, thay đổi sẽ diễn ra đột ngột và gây cảm giác thô ráp cho người dùng.
Test trên nhiều thiết bị: Hover chỉ hoạt động trên desktop với chuột. Trên mobile, bạn cần có phương án fallback (ví dụ: nút luôn hiển thị trên mobile). Hãy dùng media query để xử lý:
/* Trên mobile, luôn hiển thị nút */
@media (max-width: 768px) {
.add-to-card {
opacity: 1 !important;
}
}Ghi chú CSS: Thêm comment vào CSS để sau này dễ dàng hiểu code đang làm gì, đặc biệt khi bạn có nhiều đoạn CSS custom trong project.
Tổng kết
Kỹ thuật hover giữa hai class khác nhau trong Elementor thực chất là ứng dụng CSS selector .parent:hover .child, một kỹ thuật nền tảng của CSS. Khi kết hợp với Elementor, bạn chỉ cần gắn CSS class cho hai widget (parent và child), rồi thêm đoạn CSS phù hợp vào Custom CSS. Phương pháp này áp dụng được cho rất nhiều trường hợp: hiển thị overlay khi hover ảnh, hiện thông tin chi tiết khi hover card, đổi màu chữ khi hover container, v.v. Chúc anh em thành công!
