在 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 并将其从顶部推入所需位置 293px，从而使它们就位位置。

看起来像这样。

但是，我现在意识到这个解决方法是有缺陷的，并不是真正的最佳选择，因为它只特定于我的显示，并且缩略图大小会随着列的变化等而变化。

如有任何建议，我们将不胜感激。

谢谢。

示例 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 代码。

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

What is the best way to position custom badges on Woocommerce prodcut loop in Shop

html

css

wordpress

woocommerce

hook-woocommerce