[Tutorials] Display description when hover on product

[Tutorials] Display description when hover on products

Displaying description information when hovering over a product is a simple way for customers to see a quick overview of the product without having to click on the product detail page. This can also be considered an effective method to increase the rate of adding to cart right on the homepage of the website.

Step 1: Use hook woocommerce_after_shop_loop_item to put product description information on store page and product archive page

Copy and paste the following code into the functions.php file

// Display products info tooltips for woocommerce
add_action('woocommerce_after_shop_loop_item', 'display_front_ends');
function display_front_ends() {
// Show on
?>
<a class="wph_tooltip_box" href="<?php echo the_permalink(); ?>">
<div class="wph_tooltip tooltip" >
<strong class="wph_tooltip_title"><?php the_title();?></strong>
<?php echo get_the_excerpt(); ?>
</div>
</a>
<?php
}

Explanation: The_title function to get the product name and get_the_excerpt to get the short product description out.

Step 2: Create a table in the short description when posting the product

When posting products, in the short description, please change to text and paste the following code in and edit the information you want.

<table><tbody>
<tr><td>Hãng Sản Xuất :</td><td>An Cường</td></tr>
<tr><td>Xuất Xứ :</td><td>Việt Nam</td></tr>
<tr><td>Mã Sản Phẩm :</td><td>AC 888</td></tr>
<tr><td>Kích Thước :</td><td>1200 x 980mm</td></tr>
<tr><td>Độ Dày :</td><td>12 mm</td></tr><tr>
<td>Hệ Số Mài Mòn Bề Mặt :</td><td>AC6</td></tr>
<tr><td>Bảo Hành :</td><td>5 Năm</td></tr>
</tbody></table>

Step 3: Customize CSS to beautify when displayed

Copy and paste the following code into the style.css file

.wph_tooltip_box {
overflow: hidden;
margin-bottom: 10px;
position: absolute;
top: 0;
left: 0;
height: 80%;
width: 100%;
}
.wph_tooltip_box ul {
list-style:none;
padding:0px;
margin: 5px 0;
border-top: 1px solid #e5e5e5;
}

.wph_tooltip_box strong{
display: block;
}

.wph_tooltip * {
height:initial !important;
}
.wph_tooltip {
display:none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
font-size: 11px;
width: 250px;
height: auto;
padding: 5px;
border-radius: 3px;
box-shadow: 0 1px 2px #666;
background: #fff;
color: #000 !important;
}

.wph_tooltip_box ul li{
margin:2px;
}

.wph_tooltip .wph_tooltip_title {
background-color:red;
color: #fff;
margin: -5px;
margin-bottom: 3px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 5px;
}
.wph_tooltip img{
display:none!important;
}

/*hide on small screen / mobile*/
@media (max-width: 600px) {
.wph_tooltip{
display:none!important;
}
}

Step 4: Add visible JS for tooltip

Use the following JS code to display the tooltip

jQuery(document).ready(function($) {

var $parent,
windowWidth,
windowHeight;

//get actual window size
function winSize() {
windowWidth = $(window).width(),
windowHeight = $(window).height();
}
winSize();
$(window).resize(winSize);
//tooltip fadeIn and fadeOut on hover 
$('.tooltip').each(function() {

$(this).parent().hover(function() {
$(this).find('.tooltip').fadeIn('fast');
}, function() {
$(this).find('.tooltip').fadeOut('fast');
});

});


//tooltip position
$(document).mousemove(function(e) {
var mouseY = e.clientY,
mouseX = e.clientX,
tooltipHeight,
tooltipWidth;

$('.tooltip').each(function() {
var $tooltip = $(this);
tooltipHeight = $tooltip.outerHeight();
tooltipWidth = $tooltip.width();
$parent = $tooltip.parent();

$tooltip.css({
'left':mouseX+0,
'top':mouseY+20
});

//reposition
if (tooltipWidth + mouseX+ 20> windowWidth) {
$tooltip.css({
'left':mouseX-tooltipWidth-20
});
}

if (tooltipHeight + mouseY +20 > windowHeight) {
$tooltip.css({
'top':mouseY-20-tooltipHeight
}); 
}
});
});
});//end ready

In addition to the above method, you can also use Plugins Woocommerce Product Hover Show ToolTip Info to display tooltip when hover on product.