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

Bài viết này mình xin hướng dẫn mọi người hiển thị thông tin phần mô ta ngắn khi hover chuột vào sản phẩm.
Đầu tiên chèn đoạn code sau vào hàm functions.php của theme đang dùng.

function action_woocommerce_after_shop_loop_item( ) { 
global $product;
echo "<a class='a_product_hover' href='" . $product->get_permalink() . "'> <div class='product_hover'>";
echo "<p class='_name'> " .$product->get_name() . '</p>';
echo "<p class='_price'> " .$product->get_price(). " đ</p>";
echo "<p class='_price_old'> " .$product->get_regular_price(). " đ</s></p>";
echo $product->get_short_description() . '</br>';
echo"</a></div>";
}; 
add_action( 'woocommerce_after_shop_loop_item', 'action_woocommerce_after_shop_loop_item', 10, 0 );</pre>
Ở đây mình chỉ lấy 4 trường cần thiết
<ul>
 	<li>$product-&gt;get_name() : Tên sản phẩm;</li>
 	<li>$product-&gt;get_price() : Giá khuyến mãi của sản phẩm;</li>
 	<li>$product-&gt;get_regular_price() : Giá ban đầu của sản phẩm;</li>
 	<li>$product-&gt;get_short_description() : Lấy mô tả ngắn của sản phẩm</li>
</ul>
Tiếp đến ta thêm css cho phần hiển thị thêm sinh động hơn, đẹp hơn.
<pre class="lang:default decode:true ">.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 &gt; .product_hover{opacity: 1;}
.product_hover p {margin-bottom: 5px;}
.product_hover ._name {
padding-top: 10px;
font-size: 14px;
font-weight: bold;
}
.product_hover ._price{color: rgb(237, 0, 0);
font-size: 15px;
margin-bottom: 0;
font-weight: 600;}
.product_hover ._price_old{font-size: 13px;}

Sau đó lưu lại và xem kết quả.

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