如何在 WooCommerce 中将鼠标悬停在产品上时添加更多信息（摘录）

Question

我有一个 Woocommerce 商店，我想在将鼠标悬停在产品上时显示更多信息，如下所示：https://www.lekarnar.com/

我在functions.php中添加了一些代码以在产品页面上显示部分摘录：

function woocommerce_after_shop_loop_item_title_short_description() {
    global $product;
    if ( ! $product->get_short_description() ) return;
    ?>
    
    <div itemprop="description"> <?php echo substr(apply_filters( 'woocommerce_short_description', $product->post->post_excerpt ),0,130); echo '...' ?> </div>
    <?php
}
add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_after_shop_loop_item_title_short_description', 5);

此代码显示了附加文本，我想仅在悬停时将其显示在其他所有内容下方。

我也尝试过这个：如何将产品描述（简短）添加到 woocommerce 中的悬停框？

但这会隐藏商品的名称和价格，并且仅在悬停时显示它们。

Answer 1

我为你编写了这段代码，应该可以工作。只需将其添加到您的functions.php

add_action( 'woocommerce_after_shop_loop_item_title', 'wc_add_short_description' );

function wc_add_short_description() {
    global $product;

    ?>
        <div class="descShow" itemprop="description">
            <?php echo apply_filters( 'woocommerce_short_description', $product->post-> post_excerpt ) ?>
        </div>
        <style>
        .descShow{
            display:none;
        }
        
        li.product:hover .descShow{
            display: block;
        }
        
        </style>
    <?php
}

编辑：我添加了一些过渡效果，以便它可以平滑地隐藏和显示。请改用此代码：

add_action( 'woocommerce_after_shop_loop_item_title', 'wc_add_short_description' );

function wc_add_short_description() {
    global $product;

    ?>
        <div class="descShow" itemprop="description">
            <?php echo apply_filters( 'woocommerce_short_description', $product->post-> post_excerpt ) ?>
        </div>
        <style>
        .descShow{
        max-height: 0;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
        }
        
        li.product:hover .descShow{
           max-height: 1000px;
    transition: max-height 0.5s ease-in;
        }
        
        </style>
    <?php
}

编辑数字 2 以使说明显示在其他产品之上。使用此代码：

add_action( 'woocommerce_after_shop_loop_item', 'wc_add_short_description' );

function wc_add_short_description() {
    global $product;

    ?>
        <div class="descShow" itemprop="description">
            <?php echo apply_filters( 'woocommerce_short_description', $product->post-> post_excerpt ) ?>
        </div>
        <style>
        .descShow{
        max-height: 0;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
    position: absolute;
    z-index:2;
    background-color: #F0F0F0;
   
        }
        
        li.product:hover .descShow{
           max-height: 1000px;
    transition: max-height 0.5s ease-in;
        }
        
        
        </style>
    <?php
}

Answer 2

add_action( 'woocommerce_before_shop_loop_item', 'wc_add_short_description' );

函数 wc_add_short_description() { 全球$产品；

?>
    <div class="descShow" itemprop="description">
        <?php echo apply_filters( 'woocommerce_short_description', $product->post-> post_excerpt ) ?>
    </div>
    <style>
    .descShow{
    max-height: 0;
transition: max-height 0.5s ease-out;
overflow: hidden;
position: absolute;
z-index:2;
background-color: #F0F0F0;

    }
    
    li.product:hover .descShow{
       max-height: 300px;
       min-height:250px,
       max-width: 300px;
       min-width:250px,
transition: all 0.5s ease-out;
    }
    
    
    </style>
<?php

}