[FIXED] How to add more info (excerpt) on hover over product in WooCommerce

Issue

I have a Woocommerce store and I would like to display more information on hover over the product, something like this: https://www.lekarnar.com/

I added some code in functions.php to show a part of excerpt on products page:

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);

This code shows the additional text, which I want to show below everything else only on hover.

I also tried this: How Do I Add product descriptions (short) to hover box in woocommerce?

But this hides the name and price of the item and shows them only on hover.

Solution

I wrote this code for you which should work. Simply add it to your 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
}

Edit: I added some transition effects so it hides and shows smoothly. Use this code instead:

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
}

Edit number 2 to have the description appear over the other products. Use this code:

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
}

Answered By - John

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)