如何在woocommerce中将产品描述(简短)添加到悬停框中? [英] How Do I Add product descriptions (short) to hover box in woocommerce?
本文介绍了如何在woocommerce中将产品描述(简短)添加到悬停框中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用以下内容将产品名称和价格添加到悬停框中.
I am using the following to add the product name and price to a hover box.
在functions.php中
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-->';
}
在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;
}
我从我想在.product-details类中添加产品简短描述,但我不知道该怎么做.
I would like to add the product short description to the .product-details class, but I don't know how to do it.
谢谢.
推荐答案
WooCommerce产品说明使用 the_excerpt()
函数...像这样尝试...
WooCommerce Product description uses the_excerpt()
function... try like this...
function new_product_defaults_wrap_open() {
echo '<div class="product-details">';
the_excerpt();
}
这篇关于如何在woocommerce中将产品描述(简短)添加到悬停框中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文