如何修改代码让WooCommerce商品标题价格同时显示在悬停遮罩和图片下方

问题原因 #

现有代码使用.detach()方法是剪切原有元素移动到遮罩层，所以原位置的标题和价格会消失。要实现两处同时展示，只需要把剪切逻辑改为复制元素的逻辑即可。

调整后的JS代码 #

删除detach()相关逻辑，改用jQuery的.clone()方法复制元素后插入到遮罩层，原有位置的元素会完全保留：

jQuery(document).ready(function( $ ) { 
    var shop_module = $( '.divi-engine-custom-overlay' ), 
        shop_item = shop_module.find( 'li.product' );
    shop_item.each( function() { 
        var product_title = $( this ).find( '.product_category_title' ), 
            product_price = $( this ).find( 'span.price' ), 
            product_overlay = $( this ).find( '.et_overlay' );
        // 复制原有元素，添加专属类名方便CSS控制，避免和原有元素样式冲突
        var title_copy = product_title.clone().addClass('overlay-title');
        var price_copy = product_price.clone().addClass('overlay-price');
        // 把复制的元素插入到遮罩层
        product_overlay.prepend(title_copy, price_copy);
    } )
} );

调整后的CSS代码 #

原来的CSS选择器和实际元素类名不匹配，修改为我们新增的专属类名来控制遮罩层内的样式，不会影响原有位置的标题价格样式：

/* 遮罩层内标题和价格通用样式 */
.et_overlay .overlay-title,
.et_overlay .overlay-price {
    text-align: center;
    position: absolute;
    width: 100%;
    margin: 0; /* 清除默认边距避免位置偏移 */
    color: #fff; /* 可根据需求自行调整文字颜色 */
}
/* 遮罩层内标题位置 */
.et_overlay .overlay-title {
    top: 5%; 
}
/* 遮罩层内价格位置 */
.et_overlay .overlay-price {
    top: 80%; 
}

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