Hiển thị thông tin sản phẩm khi hover vào sản phẩm bằng Action Hook

Học WordPress

Một website tốt luôn đòi hỏi kèm theo một tính năng ấn tượng. Đây là cái mà khách hàng của bạn nhìn vào đầu tiên. Vừa tạo ấn tượng tốt với khách hàng, cung cấp cho khách hàng đầy đủ thông tin về sản phẩm đó.

Trong bài viết này mình sẽ giới thiệu cho bạn một chức năng hiển thị thông tin mô tả của sản phẩm khi hover sản phẩm đó bằng Action Hook trong WordPress.

Hiển thị thông tin sản phẩm khi hover vào sản phẩm.
Hiển thị thông tin sản phẩm khi hover vào sản phẩm.

Chèn code hiển thị thông tin mô tả của sản phẩm khi hover vào sản phẩm

Cách này bạn chỉ cần để code vào functions.phpstyle.css của childtheme để trong quá trình sử dụng, bạn update theme thì không mất nhé.

Bước 1:

Trước tiên chúng ta cần lấy được thông tin mô tả và hiển thị ra box sản phẩm, đoạn code sau sẽ làm điều đó, các bạn bỏ vào file function.php của theme đang sử dụng nhé:

Ở đây mình chỉ lấy 4 trường cần thiết đó là:

  • $product->get_name() : Tên sản phẩm;
  • $product->get_price() : Giá khuyến mãi của sản phẩm;
  • $product->get_regular_price() : Giá ban đầu của sản phẩm;
  • $product->get_short_description() : Lấy mô tả ngắn của sản phẩm

Các bạn kiểm tra kết quả nhé:

Hiển thị thông tin của sản phẩm khi hover vào sản phẩm đó.
Hiển thị thông tin của sản phẩm khi hover vào sản phẩm đó.

Nhìn rất là xấu, vì mình chưa có thêm css cho nó, qua bước 2 mình hướng dẫn bạn thêm css.

Ngoài ra nếu các bạn muốn hiển thị thêm các trường khác thì mình có liệt kê bên dưới:

Bước 2:

CSS cho phần mô tả khi hover sản phẩm

Thông tin đã hiện ra rồi, bây giờ chúng ta chỉ cần CSS lại cho nó đẹp hơn thôi, tùy vào mức độ sáng tạo của các bạn 😀 . Bên dưới là đoạn CSS của mình

.product_hover a, .a_product_hover{color:rgb(51, 51, 51) !important;}
.product_hover{display: block ; opacity: 0; position: absolute;
	background-color: #fff;
	color: red;
    top: 0; font-size: 14px;
    left: 0;
    margin-left: -1px;
    padding-left: 1px;
    width: 101%;
    height: 100%;
    overflow-y: auto;
    z-index: 25;}
.col-inner:hover > .product_hover{opacity: 1;}
.product_hover p {margin-bottom: 5px;}
.product_hover ._name{padding-top: 10px; font-size: 18px;}
.product_hover ._price{color: rgb(237, 0, 0);
    font-size: 25px;
    margin-bottom: 0;
    font-weight: 600;}
.product_hover ._price_old{font-size: 13px;}

Kết quả nhận được:

Hiển thị thông tin chi tiết của sản phẩm khi hover vào sản phẩm đó.
Hiển thị thông tin chi tiết của sản phẩm khi hover vào sản phẩm đó.

Lời kết:

Hi vọng bài viết sẽ hữu ích cho các bạn, nếu có khó khăn gì các bạn hãy comment vào bên dưới để được hỗ trợ. Chúc các bạn thành công!