Hướng dẫn thêm hiển thị thông tin khi hover vào sản phẩm.

Bài này sẽ giúp các bạn hiển thị thông tin sản phẩm khi hover vào cho theme Flatsome. Ví dụ bạn muốn hiển thị mô tả ngắn khi khách hàng hover vào box sản phẩm trên trang chủ trước khi đi vào trang chi tiết.

Cách này bạn chỉ cần để code vào functions.php và style.css của childtheme để trong quá trình sử dụng, bạn update theme thì không mất nhé.

Copy và paste đoạn code sau vào cuối file functions.php của theme flatsome của bạn.

function action_woocommerce_after_shop_loop_item( ) { 
     global $product;
     echo '<a href=" '.$product->get_permalink().' ">
              <div class="showinfo">
                  //show thông tin tại đây
              </div>
           </a>';
     }; 
add_action( 'woocommerce_after_shop_loop_item', 'action_woocommerce_after_shop_loop_item', 10, 0 );

Một số trường quan trọng đó 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.

Tiếp theo thêm đoạn css vào file style.css:

.showinfo {
    position: absolute;
    top: 0px;
    width:100%;
    height:100%;
    z-index:22;
    display:none;
    background: #fff; 
}
.product-small:hover .showinfo{
    display:block;
    cursor:pointer;
    opaticy: 0.5;
}

Vậy là xong, Lưu tại các thay đổi và xem kết quả nhé.

Một số trường khác nếu bạn muốn hiển thị thêm:

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

 

3.3/5 (3 Reviews)

14
Leave a Reply

avatar
6 Comment threads
8 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
7 Comment authors
Thành Trungminhvũ văn đạttháiTuấn anh Recent comment authors
  Subscribe  
Notify of
minh
Guest

Hello Trung, Mình có custom field thông tin sản phẩm theo bài viết ở đây https://longvietweb.com/them-custom-fields-vao-simple-products-cho-woocommerce.html.
Vậy giờ mình muốn hover hiện các field custom này thì mình phải làm ntn. Chứ viết thêm mô tả ngắn giống y như custom field thì đọc khá rối

vũ văn đạt
Guest
vũ văn đạt

đưa thuộc tính ra trên hover box như nào bạn ơi?

thái
Guest

get_post_meta(‘$product->get_name()’);

như thế này hả a trung, em làm ko được nhỉ :p sorry ms vào nghề

thái
Guest

get_post_meta(‘int $post_id,string $product->get_name()’);

em thử rồi ko được ạ

thái
Guest

get_post_meta(‘int $post_id,string $product->get_name()’);

em thử rồi ko được ạ

Tuấn anh
Guest

Cái này của bác có kết hợp vào Tooltip khi di chuột qua sản phẩm ko ạ?

TrungAZ
Guest

Custom post field thì lấy ra sao bbác ơi 🙁

Nông Tiến Dũng
Guest

Cảm ơn. Bài viết rất hay, hữu ích tuyệt vời.

Lê Thành Trung
Web Developer
Chào bạn đến với website của mình. Mình thích chia sẻ về những kinh nghiệm trong việc lập trình Web. Cảm ơn bạn đã ghé thăm!