Woocommerce 在悬停图像叠加层上显示产品标题答案

【问题标题】：Woocommerce show product title on hover image overlayWoocommerce 在悬停图像叠加层上显示产品标题
【发布时间】：2021-12-23 06:20:35
【问题描述】：

我正在开发 woocommerce 网上商店。现在，我正在寻找一种解决方案，以在客户悬停产品图像/缩略图时在叠加层内显示产品标题和价格。

我快到了。此时产品价格（price）、标题（product_category_title）显示在缩略图下方。但是，此代码“获取”产品类别标题和价格，并将其“放置”在图像叠加层中。问题是我想在两个位置都显示标题和价格。所以在图像覆盖内部和它的原始位置；图片下方。

如何调整代码以使其正常工作？

<script>
jQuery(document).ready(function( $ ) { // When jQuery is ready
        var shop_module = $( '.divi-engine-custom-overlay' ), 
            shop_item = shop_module.find( 'li.product' );
        shop_item.each( function() { // Runs through each loop item in the shop
            var product_title = $( this ).find( '.product_category_title' ), // Finds the Product Title
                product_price = $( this ).find( 'span.price' ), // Finds the Product Price
                product_overlay = $( this ).find( '.et_overlay' ); // Finds the Divi Overlay
            product_title.detach(); // Detaches the Product Title
            product_price.detach(); // Detaches the Product Title
            product_overlay.prepend(product_title, product_price); // Adds Product Title and Price to the Overlay
        } )
  } );
</script>

HTML sn-p

<li class="product type-product post-450 status-publish first instock product_cat-energy has-post-thumbnail shipping-taxable purchasable product-type-simple">
    <a href="#" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><span class="et_shop_image"><img width="300" height="300" src="image.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="image.jpg 300w, image.jpg 150w" sizes="(max-width: 300px) 100vw, 300px" /><span class="et_overlay"></span></span>
        <h2 itemprop="name" class="product_category_title"><span>Creme |  Bodylotion </span></h2>

<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus ...</p>
    <span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">&euro;</span>&nbsp;24,99</bdi></span></span>
</a><a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="450" data-product_sku="" aria-label="Add &ldquo;Bodylotion&rdquo; to your cart" rel="nofollow">&#xe013;</a></li>

这是css：

<style>

  /* Hover Price and Title in overlay */

  .et_overlay .woocommerce-loop-product__title,
  .et_overlay .price, 
  .et_overlay .loop-title-item,
  .et_overlay .loop-title-price {
    text-align: center; /* Centers the Title and Price */
    position: absolute;
    width: 100%;
  }

  /* Hover Title Position from Top */

  .et_overlay .woocommerce-loop-product__title,
  .et_overlay .loop-title-item {
    top: 5%; /* Change this value */
  }

  /* Hover Price Position from Top */

  .et_overlay .price,
  .et_overlay .loop-title-price {
    top: 80%; /* Change this value */
  }

  
  
</style>

【问题讨论】：

请添加
部分的 html sn-p

【解决方案1】：

$(function () {
                jQuery(document).ready(function ($) { // When jQuery is ready
                    var shop_module = $('.divi-engine-custom-overlay');
                    var shop_item = shop_module.find('li.product');
                    shop_item.each(function () { // Runs through each loop item in the shop
                        var et_overlay = $(this).find('.et_overlay');
                        $(this).find('.product_category_title,span.price').clone().appendTo(et_overlay); // Adds Product Title and Price to the Overlay
                    });
                });
            });
// this will copy the price,title ( not move )

编辑：
clone() 函数将复制所选元素，“appendTo” -> 顾名思义：将所选内容附加到位置（元素）。注意：append 不会改变目的地内的任何现有元素，它只会追加新的东西。

【讨论】：

就是这样！你能解释一下你在那里做了什么吗？
您也可以减少一次选择多个的代码，请检查选择元素的选项有很多
是否可以为克隆的元素添加类名？我想我需要给克隆的元素“product_category_title”一个额外的类，我可以给它另一种颜色。
不是必须的，你可以使用它的父级作为参考：eg:- .et_overlay .product_category_title{color: #bbb;}