在 Shop 中的 Woocommerce 产品循环中放置自定义徽章的最佳方式是什么

Question

问题：如何直接钩入商店页面attachment-woocommerce_thumbnail 上的产品缩略图html？或者，您会如何推荐将自定义徽章 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;
}

Answer 1

您可以尝试的一件事是围绕产品图片创建一个包装器，以便您可以相对于该包装器定位徽章。

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 class="product-image-wrapper">';
}

// Close wrapper
function product_loop_image_wrapper_close() {
    echo '</span>';
}

此代码位于functions.php 中。您仍然需要调整 CSS 代码。