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

霸气de小男生 提交于 2020-07-08 02:32:55

问题


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 https://support.woothemes.com/hc/en-us/articles/203103707-Products-layout-show-price-on-hover-like-Peddlar-theme-?page=1#comment_203088363.

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

Thanks.


回答1:


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

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



回答2:


To complete and clarify on the issue regarding the order, this worked for me:

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_single_title', 5 ); add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_single_excerpt', 10 ); add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_price', 20 );



来源:https://stackoverflow.com/questions/35135891/how-do-i-add-product-descriptions-short-to-hover-box-in-woocommerce

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!