Share code

Hiển thị thông tin sản phẩm khi rê chuột vào sản phẩm theo dạng Tooltip

Đầu tiên chèn code vào file functions.php

//chèn thư viện jquery
// Enqueue required fonts, scripts, and styles.
add_action( 'wp_enqueue_scripts', 'favorite_enqueue_scripts' );
function favorite_enqueue_scripts() {
 
    wp_enqueue_script( 'wph_mainjs', get_stylesheet_directory_uri() . '/assets/js/main.js' , 'jquery' , '' , true );
    wp_enqueue_style( 'wph_maincss', get_stylesheet_directory_uri() . '/assets/css/main.css' );
}

Thông tin mà bạn muốn hiển thị trong toollip

+ Hiển thị đoạn mô tả ngắn thì chèn code này vào file function kế function ở trên

// Hiển thị tên sản phẩm và mô tả ngắn sản phẩm
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
}

// Hoặc hiển thị thông số sản phẩm dùng ACF tạo các field của sản phẩm

add_action('woocommerce_after_shop_loop_item', 'display_front_ends');
function display_front_ends() {
    // Show on
    ?>
      <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>
    <?php
}

 

 

Sau đó tạo 1 folder trong child theme đó là Folder assets và tạo 2 fold trong assets là js + css

+ tạo file main.js trong folder js

+ Tạo file main.css trong folder css

Code file css

.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;
    }
}

Code file js

---------------------jquery------------------

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