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

Question

我正在做一个 woocommerce 网上商店。现在，我正在寻找一种解决方案，当客户将鼠标悬停在产品 image/thumbnail.

时，在覆盖层内显示产品标题和价格

我快到了。此时商品价格（price）、标题（product_category_title）显示在缩略图下方。然而，此代码 'takes' 产品类别标题和价格以及 'places' 它在图像叠加层中。问题是我想在两个位置显示标题和价格。所以在图像覆盖层内部和它的原始位置；图片下方。

我如何修改代码才能使其正常工作？

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

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

Answer 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() function will make a copy of the element selected, and the "appendTo" -> 顾名思义：会将所选内容附加到位置（元素）。注意：附加不会更改目标内的任何现有元素，它只会附加新内容。

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

Woocommerce show product title on hover image overlay

wordpress

jquery

overlay

hover

woocommerce