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

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

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

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

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:

                '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,

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:

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!

  • Mò mãi cuối cung cũng ra được, thớt huống dẫn css giong tgdd dc k , minh ko rành về code lắm ,thank thớt.

    Thích Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

arrow