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

Posted 2023-05-08

【中文标题】Woocommerce 在悬停图像叠加层上显示产品标题

【英文标题】：Woocommerce show product title on hover image overlay

【发布时间】：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   src="image.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"  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

我在开头的帖子中添加了 html sn-p。

您的代码正在将两个元素移动到您想要的位置，但您需要更改位置（价格、标题）。我认为您需要一些 css 更改（不是 jQuery）。我不确定那里应用了什么设计/css。

我在开头的帖子中添加了css。

看起来 jQuery 将标题和价格从原始位置（缩略图下方）传输/移动到叠加层。有没有办法将标题和价格复制到叠加层，而不是移动它？

【参考方案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_titlecolor: #bbb;