我在 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 片段
<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">€</span> 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 “Bodylotion” to your cart" rel="nofollow"></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>
uj5u.com熱心網友回復：
$(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 )
編輯：
該克隆（）函式將所選元素的副本，而“ appendTo ” - >作為名字告訴：將追加所選內容的位置（元素）。注意： append 不會改變目的地內的任何現有元素，它只會附加新的東西。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/355634.html
標籤：查询 WordPress的 求购 徘徊 覆盖