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

48 Likes 2 Comments

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 ý.

2 Comments

  1. mình copy và dán vào file theo hướng, dẫn, hiện thông báo lỗi :

    “Đoạn code PHP bạn thay đổi đã được khôi phục vì có lỗi trong dòng số 324 của file wp-content/themes/top-store/functions.php. Hãy sửa và thử lưu lại.

    syntax error, unexpected ‘&’ ”

    Hướng dẫn cách fix lỗi với, cảm ơn!

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 *