How Do I Add product descriptions (short) to hover box in woocommerce?

Tags: php,html,css,web,woocommerce

Problem :

I am using the following to add the product name and price to a hover box.

In functions.php

// Alter produt loop individual products 

add_action( 'woocommerce_before_shop_loop_item_title', 'new_product_defaults_wrap_open' , 20 ); //opener
add_action( 'woocommerce_after_shop_loop_item_title', 'new_product_defaults_wrap_close', 40); //closer

function new_product_defaults_wrap_open() {
  echo '<div class="product-details">';    
function new_product_defaults_wrap_close() {
    echo '</div><!--/.product-details-->';

In css:

/*The code below will simply setup the price-title area to be hidden and have a background. Please note that uou will have to change the background and height to match your website color scheme and product height  but first load it as and then adjust                                                                                      

.products .product .product-details {
        position: absolute;
        background: rgba(119, 203, 109, 0.95);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        color: #f7f7f7;
        padding: 1.618em;
        text-align: left;
    opacity: 0;
    height: 167px;
    filter: alpha(opacity=@opacity * 100);  
    -webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    -ms-transition: all ease 0.4s;
        -o-transition: all ease 0.4s;
        transition: all ease 0.4s; 

/* Show the that was setup above when the user hovers*/

 ul.products li.product:hover .product-details {
    filter: alpha(opacity=@opacity * 100);
    opacity: 1;

  ul.products li.product a img:hover {
    opacity: 0.9;

I got this code from

I would like to add the product short description to the .product-details class, but I don't know how to do it.


Solution :

WooCommerce Product description uses the_excerpt() function... try like this...

function new_product_defaults_wrap_open() {
  echo '<div class="product-details">';

    CSS Howto..

    How to add new table rows and columns with table headers to css table

    How to get CSS background property to work with toggleClass() in jQuery?

    How to add and remove background images in css on clicking a link on page

    How to set CSS property in adjacent elements?

    How do I center this form-button block?

    How do I scrape the table from a website (link provided) using CSS? [closed]

    How to remove css background transparent?

    How to insert a div in between flexbox rows and keep everything responsive?

    CSS: how to select parent's sibling [duplicate]

    How can I make a DIV background change color on hover if the DIV has a class of “disabled”? [closed]

    How to fill in blank space using html and css

    How to hide text using CSS?

    how to increase the font-size without making it thicker

    (CSS) How to Shorten CSS code

    How can I have % of width of an img wrapped in a specific div width?

    How to achieve this layout with div and css?

    How to refere a stylesheet in phonegap?

    How to get the first parent that has a certain CSS property using jQuery?

    How can I add CSS animation to an element on a web page? [closed]

    How to hover mutiple “div” in the same time?

    How to reduce space between unordered list and its previous element(center)?

    How to remove “pictureframe” in Internet Explorer?

    How to style a credit card expiration date input field to include spaces and forward slash?

    How to make the CSS width property go from bottom to top

    How to avoid wrapping in CSS float

    How to apply custom styles to a jasper html report

    How do I center a table?

    how to exclude tags of certain types using LESS css

    Horizontal scrolling doesn't show up when I resize browser

    How could I add two separate text styles to a button in a form in CSS?