WooCommerce产品信息悬停显示于商品图片上方实现需求

需求：将WooCommerce商店页的产品信息（标题、价格等）移至商品图片上方，仅在鼠标悬停图片时显示，现有模板代码及基础修改尝试未达成预期效果。

当前模板代码：

<li <?php function_exists('wc_product_class') ? wc_product_class( $class, $product ) : post_class($class); ?>>
    <?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
    <div class="item-inner">
        <div class="product--thumbnail item--image">
            <div class="item--image-holder">
                <a href="<?php the_permalink();?>"><?php do_action( 'woocommerce_before_shop_loop_item_title' ); ?><div class="item--overlay"></div></a>
            </div>
            <div class="product--action">
                <?php
                do_action('oasis_shop_loop_item_action');
                ?>
            </div>
        </div>
        <div class="product--info">
            <?php
            do_action( 'woocommerce_shop_loop_item_title' );
            do_action( 'woocommerce_after_shop_loop_item_title' );
            ?>
            <div class="product">
                <?php 
                do_action('oasis_shop_loop_item_action'); 
                ?>
            </div>
        </div>
    <?php 
        do_action( 'woocommerce_after_shop_loop_item' ); 
        ?>
    </div>
</li>

解决方案 #

1. 调整HTML结构

将product--info容器移动到product--thumbnail内部，与item--image-holder同级，基于图片容器做定位参照：

<li <?php function_exists('wc_product_class') ? wc_product_class( $class, $product ) : post_class($class); ?>>
    <?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
    <div class="item-inner">
        <div class="product--thumbnail item--image">
            <!-- 产品信息容器移至此处 -->
            <div class="product--info">
                <?php
                do_action( 'woocommerce_shop_loop_item_title' );
                do_action( 'woocommerce_after_shop_loop_item_title' );
                ?>
                <div class="product">
                    <?php 
                    do_action('oasis_shop_loop_item_action'); 
                    ?>
                </div>
            </div>
            
            <div class="item--image-holder">
                <a href="<?php the_permalink();?>"><?php do_action( 'woocommerce_before_shop_loop_item_title' ); ?><div class="item--overlay"></div></a>
            </div>
            <div class="product--action">
                <?php
                do_action('oasis_shop_loop_item_action');
                ?>
            </div>
        </div>
    <?php 
        do_action( 'woocommerce_after_shop_loop_item' ); 
        ?>
    </div>
</li>

2. 添加CSS样式

通过相对定位+绝对定位实现悬停显示效果，同时保证信息可读性：

/* 设置图片容器为相对定位，作为绝对定位参照 */
.product--thumbnail.item--image {
    position: relative;
    overflow: hidden;
}

/* 默认隐藏产品信息，移出可视区域 */
.product--thumbnail .product--info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background-color: rgba(255,255,255,0.9);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 10;
}

/* 悬停时将信息区域移回可视范围 */
.product--thumbnail.item--image:hover .product--info {
    transform: translateY(0);
}

/* 可选：调整文本样式适配显示效果 */
.product--info .woocommerce-loop-product__title {
    font-size: 16px;
    margin-bottom: 8px;
}

.product--info .price {
    font-size: 14px;
    color: #222;
}

说明 #

• 结构调整后，产品信息以图片容器为参照定位，默认通过transform移出顶部可视区；
• 悬停时触发过渡动画，平滑显示信息区域；
• 半透明背景平衡图片可见度与文本可读性；
• 可根据设计需求调整CSS内的边距、背景色、动画时长等参数。

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