問題：你如何直接進入商店頁面上的產品縮略圖html attachment-woocommerce_thumbnail？或者，您將如何推薦將自定義徽章bottom: 0絕對定位到產品影像的最佳方式？
我的目標是在 WooCommerce 商店頁面上為產品添加自定義徽章，并將徽章放置在產品影像縮略圖的底部。
首先，我使用鉤子創建了一個函式woocommerce_before_shop_loop_item_title- 但是，這個鉤子意味著標簽默認設定為顯示在產品影像上方。
然后我添加了 CSS，通過使用 z-index制作il.product position: relative和自定義徽章position: absolute并將其從頂部推到所需位置 293 像素，從而使它們就位。
所以它看起來像這樣。
但是，我現在意識到這種解決方法是有缺陷的，并不是真正的最佳選擇，因為它只針對我的顯示，縮略圖大小會隨著列的變化等而變化。
任何建議將不勝感激。
謝謝你。
示例 PHP 函式，簡化。
function woo_property_badges() {
global $post;
?>
<div class="woo-property-badge">
<span class="woo-property-featured-badge">'Featured'</span>
<span class="woo-property-cat-badge">'Category'</span>
</div>
<?php }
add_action( 'woocommerce_before_shop_loop_item_title', 'woo_property_badges', 1 );
示例 HTML 輸出
<li class="product type-product post-210012 status-publish first instock product_cat-residential-property has-post-thumbnail featured virtual taxable purchasable product-type-auction et_pb_shop_item_0_0">
<a href="/product/Test-Product/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
<div class="woo-property-badge">
<span class="woo-property-featured-badge">Featured</span>
<span class="woo-property-cat-badge">Residential</span>
</div>
測驗產品名稱
使用的 CSS
il.product-type-auction {
position: relative;
}
.woocommerce span.woo-property-featured-badge {
position: absolute;
left: 10px;
top: 293px;
display: block;
z-index: 2;
width: auto;
max-width: 70%;
padding: 5px 10px;
background: #31324E;
font-weight: 400;
color: #fff;
}
.woocommerce span.woo-property-cat-badge{
background-image: linear-gradient(to right, #A7784A73 , #A7784A);
color: #FFF;
padding: 5px 10px;
position: absolute;
top: 293px;
right: 10px;
z-index: 2;
font-size: 14px;
}
.woocommerce span.woo-property-cat-badge:before {
position: absolute;
right: 0;
top: 0;
bottom: 0;
content: "";
left: -12px;
border-top: 15px solid transparent;
border-right: 12px solid #A7784A73;
border-bottom: 15px solid transparent;
width: 0;
}
uj5u.com熱心網友回復：
您可以嘗試的一件事是圍繞產品影像創建一個包裝，以便您可以相對于該包裝定位徽章。
function wrap_loop_product_image() {
if ( ! class_exists( 'WooCommerce' ) ) return; //* exit early if WooCommerce not active/installed
add_action( 'woocommerce_before_shop_loop_item_title' , 'product_loop_image_wrapper_open', 9 );
add_action( 'woocommerce_shop_loop_item_title' , 'product_loop_image_wrapper_close', 9 );
}
add_action( 'woocommerce_before_shop_loop' , 'wrap_loop_product_image', 3 );
// Open wrapper
function product_loop_image_wrapper_open() {
echo '<span >';
}
// Close wrapper
function product_loop_image_wrapper_close() {
echo '</span>';
}
此代碼位于functions.php 中。您仍然需要調整您的 CSS 代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/381051.html
標籤：html css WordPress的 求购 钩子商务