php - 如何在 WooCommerce 中将鼠标悬停在产品上添加更多信息(摘录)
问题描述
我有一家 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 中将产品描述(简短)添加到悬停框?
但这隐藏了商品的名称和价格,仅在悬停时显示。
解决方案
我为您编写了这段代码,它应该可以工作。只需将其添加到您的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
}
推荐阅读
- javascript - 停止后调用间隔
- elasticsearch - elasticsearch _update_by_query 有冲突 = 继续
- c# - C#属性方法的使用
- c++ - socket.io 为什么断言(假)
- python - Errbot 自然语言处理
- .net-core - dotnet SDK 2.2.104 不编译 .NET Core 2.2
- python - spaCy 2.0:从 excel 文件加载训练数据自定义 NER 模型问题
- php - 更改数组中键的值并重新排列整个多维数组
- jquery - 如何在 Solr 查询分组中访问 groupedValue
- google-translate - 谷歌网页翻译 - 退出翻译模式,有什么可用的方法吗?