WooCommerce如何实现鼠标悬停商品图片时显示商品标题

直接修改你当前定位到的模板代码段，把原有输出商品分类的逻辑替换为商品标题输出即可，具体操作如下：

• 找到主题中对应的模板文件，定位到你贴出的代码段，删除原版本判断下输出分类列表的代码，替换为兼容WooCommerce新旧版本的商品标题输出代码

修改完成后的完整代码如下：

<div class="bg-overlay"></div>
<a href="<?php the_permalink(); ?>" class="link-overlay"></a>
<div class="text-on-hover-wrap">
    <?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?>
    <?php
    // 原分类输出逻辑替换为商品标题输出
    if ( $woocommerce && version_compare( $woocommerce->version, '3.0', '>=' ) ) {
        echo '<div class="hover-product-title">' . esc_html( $product->get_name() ) . '</div>';
    } else {
        echo '<div class="hover-product-title">' . esc_html( $product->get_title() ) . '</div>';
    }
    ?>
</div>

• 可选调整：如果你不需要悬停层显示商品价格，直接删除代码中<?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?>这一行即可
• 样式适配：将下面的CSS代码添加到主题「自定义-额外CSS」中，可以调整标题的显示样式，匹配你需要的展示效果，色值、字号、间距可根据自身主题风格修改：

.text-on-hover-wrap .hover-product-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin: 6px 0;
    padding: 0 10px;
}

注意：修改模板文件前请提前备份原文件，若修改后标题无法正常输出，可在标题输出代码前添加global $product;声明全局商品对象即可。

内容的提问来源于stack exchange，提问作者Felipe SooUl