Hiển thị thông tin của sản phẩm khi hover sản phẩm đó bằng Action Hook

hien-thi-thong-tin-mo-ta-cua-san-pham-khi-hover-vao-san-pham-bang-action-hook

Trong bài viết này mình sẽ hướng dẫn các bạn cách 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

hien-thi-thong-tin-mo-ta-cua-san-pham-khi-hover-vao-san-pham-bang-action-hook

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

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 add vào file function.php của theme đang sử dụng nhé:

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'>Giá cũ: <s>" .$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 );

Ở đâ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é:

hien-thi-mo-ta-cua-san-pham-khi-hover-vao-san-pham-bang-action-hook

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:

                'name'               => '',
		'slug'               => '',
		'date_created'       => null,
		'date_modified'      => null,
		'status'             => false,
		'featured'           => false,
		'catalog_visibility' => 'visible',
		'description'        => '',
		'short_description'  => '',
		'sku'                => '',
		'price'              => '',
		'regular_price'      => '',
		'sale_price'         => '',
		'date_on_sale_from'  => null,
		'date_on_sale_to'    => null,
		'total_sales'        => '0',
		'tax_status'         => 'taxable',
		'tax_class'          => '',
		'manage_stock'       => false,
		'stock_quantity'     => null,
		'stock_status'       => 'instock',
		'backorders'         => 'no',
		'sold_individually'  => false,
		'weight'             => '',
		'length'             => '',
		'width'              => '',
		'height'             => '',
		'upsell_ids'         => array(),
		'cross_sell_ids'     => array(),
		'parent_id'          => 0,
		'reviews_allowed'    => true,
		'purchase_note'      => '',
		'attributes'         => array(),
		'default_attributes' => array(),
		'menu_order'         => 0,
		'virtual'            => false,
		'downloadable'       => false,
		'category_ids'       => array(),
		'tag_ids'            => array(),
		'shipping_class_id'  => 0,
		'downloads'          => array(),
		'image_id'           => '',
		'gallery_image_ids'  => array(),
		'download_limit'     => -1,
		'download_expiry'    => -1,
		'rating_counts'      => array(),
		'average_rating'     => 0,
		'review_count'       => 0,

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, bình thường sẽ ẩn nó đi (“display: none;” hoặc “opacity:0”), khi hover sản phẩm mới cho nó hiện ra:

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

hien-thi-mo-ta-cua-san-pham-khi-hover-vao-san-pham-bang-action-hook-3

Nhớ kiểm tra xem class cha của “.product_hover” là thằng nào rồi thế vào chỗ “.col-inner:hover” nhé, phải đúng nó mới hiển thị được. Vì mỗi theme nó mỗi khác, trong ví dụ mình sử dụng theme Flatsome.

Lời kết:

Tới đây mình xin “chấm hế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 !

Chia sẻ một chút thông tin trong lý lịch của bạn. Những thông tin này có thể được công khai.

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 *