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

09/10/2018 Việt Hải Thủ Thuật Wordpress 2733 view

Xin chào các bạn trong bài viết này mình sẽ hiển thị thông tin sản phẩm khi hover vào trên WordPress theme Flatsome. Khi bạn muốn hiển thị mô tả khi khách hàng hover vào box sản phẩm trên trang chủ trước khi vào trang chi tiết sản phẩm.

Bạn chèn code vào functions.php và style.css của childtheme Flatsome vì để trong theme cha khi bị update sẽ bị reset lại mất.
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 để get dữ liệu:

  • $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;
}

Lưu tại các thay đổi và xem kết quả nhé.
Gợi ý thêm 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,

Chúc các bạn thành công!