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

Posted 2023-02-19

【中文标题】在 Shop 中的 Woocommerce 产品循环中放置自定义徽章的最佳方式是啥

【英文标题】：What is the best way to position custom badges on Woocommerce prodcut loop in Shop在 Shop 中的 Woocommerce 产品循环中放置自定义徽章的最佳方式是什么

【发布时间】：2022-01-17 03:43:07

【问题描述】：

问题：如何直接钩入商店页面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;

【参考方案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 代码。

【讨论】：

嗨垃圾。感谢您抽出宝贵时间提供建议。不幸的是，这样做时，'浮动：对;'不为 cat-badge 实现，容器进入整个产品 li 而不是缩略图的底部。

查看我的更新答案。尝试在产品图片周围插入包装，以实现更精确的定位。

谢谢你。完美的想法和工作的享受。应用了一些 CSS，例如制作 'span.product-image-wrapper position: relative; display: block;' 并根据需要将产品徽章 div 的位置设置到底部。全做完了。再次感谢。

嗨垃圾。我可以再问一个关于产品包装的快速问题吗？我注意到，当我在没有分页的产品页面上使用简码或 woo 相关产品时，图像包装器功能不起作用/适用。任何想法为什么？

这可能是优先事项？尝试将 9 调整为更高或更低的值。也可能是简码或正在删除或覆盖此操作？