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


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

32 Likes Comment

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 !

 

Bài viết liên quan

Chủ bút: Lê Tú

Blog mình lập ra nhằm mục đích viết lại những gì mình đã tìm hiểu, đã đọc được trên mạng, qua bạn bè để mai mốt cần tìm khỏi quên, cũng như chia sẻ những thứ mà mình đã sưu tầm được. Vì mình không phải chuyên lập trình website nên một số bài viết còn sai sót mong mọi người góp ý.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *