Hover 上的产品信息 - WooCommerce

Question

在客户网站上默认安装 WordPress 和 WooCommerce。我希望将默认产品信息移至产品图像顶部并使其悬停时显示。我在下面对其如何工作做了一个相当基本的概述。

相关页面的当前链接是：https://captaincutz.com/store/

在 CSS 之前，后端的基本代码库看起来像这样

<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>

我尝试了一些基本的代码编辑，以及绝对定位项目，这很有效；但它没有达到想要的外观

Answer 1

您可以使用此代码并相应地添加 CSS min-height 和 min-width 值，以便在悬停时覆盖整个图像产品。但仍然需要根据屏幕尺寸对 @mediascreen 进行一些调整，以完全覆盖您的产品（如果有帮助的话）。您还可以使用钩子“woocommerce_before_shop_loop_item”

add_action( 'woocommerce_before_shop_loop_item', 'wc_add_customdesc' );

function wc_add_customdesc() {
    global $product;
    $title = $product->get_title(); 
    $price = $product->get_price();
    ?>
        <div class="descShow" itemprop="description">
            <?php echo apply_filters( 'woocommerce_short_description', $product->post-> post_excerpt ); ?>
            <?php echo '<p class="thedateclass">' .'The title is '. $title . '</p>'; ?>
        </div>
        <style>
        .descShow{
        max-height: 0px;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
    position: absolute;
    z-index:2;
    color:white;
    background-color: rgba(65,65,65,0.6);
    opacity:0%;
   
        }
        
        li.product:hover .descShow{
           justify-content:left;
           vertical-align:center;
           padding-left:5px;
           max-height: 310px;
           max-width: 300px;
           min-height:308px;
           min-width:310px;
           opacity:90%;
           transition: all 0.5s ease-in-out;
        }
            
            @media (max-width: 645px)
            li.product:hover .descShow{
                max-width: 80px;
                max-height:80px;
                min-height:80px;
                min-width:80px;
            }
            @media (max-width: 344px)
            li.product:hover .descShow{
                max-height:80px;
                max-width: 80px;
                min-height:80px;
                min-width:80px;
}
        
        
        </style>
    <?php
}