在 Woocommerce 存档页面上的产品价格后添加图标

Posted 2023-03-06

【中文标题】在 Woocommerce 存档页面上的产品价格后添加图标

【英文标题】：Add an icon after product price on Woocommerce archive pages

【发布时间】：2019-08-01 05:24:31

【问题描述】：

我正在尝试在 Woocommerce 中的产品价格之后为商店页面上的特定产品类别添加自定义图标。所以我想在“快速运输”产品类别的所有产品的价格之后添加一个“快速送货卡车”的图标。

我希望它在 wish.com 网站中显示，就像在这个屏幕截图中一样：

这是我尝试过的：

add_filter( 'woocommerce_price_html', 'prepend_append_icon_to_price', 10, 2 );
function prepend_append_icon_to_price( $price, $instance ) 

    if(is_product_category( 'fast-shipping'))      
        $icon = ' <i class="fas fa-shipping-fast"></i> ';
        $price = $icon . $price . $icon;
    
    return $price;

但是在价格之后它不显示任何内容。

任何帮助将不胜感激。

【问题讨论】：

嗨，欢迎来到 Stack Overflow。请编辑问题以包含您的相关代码，因为没有它任何人都无法复制您的情况。另外，请不要一次问多个问题。谢谢。

好的，会的，谢谢！

【参考方案1】：

在属于价格标签之前或之后使用css：

    fa-shipping-fast:before
            content: url(.....);
            width : ....;
            height : ....;
            ....
    

【参考方案2】：

自 Woocommerce 3 以来，您使用了错误的钩子，并且您的代码中有一些错误。 在右侧价格后显示一个图标，用于“快速发货”产品类别，两种情况：

1) 在所有 Woocommerce 存档页面上：

add_filter( 'woocommerce_get_price_html', 'prepend_append_icon_to_price', 10, 2 );
function prepend_append_icon_to_price( $price, $product ) 

    if( has_term( 'fast-shipping', 'product_cat', $product->get_id() ) && ! is_product() )
        $price .= '<span style="float:right"><i class="fas fa-shipping-fast"></i></span> ';
    
    return $price;

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

---

2) 在特定的 Woocommerce 产品类别存档页面上：

add_filter( 'woocommerce_get_price_html', 'append_icon_after_product_price', 10, 2 );
function append_icon_after_product_price( $price, $product ) 

    if( is_product_category( 'fast-shipping' ) )
        $price .= '<span style="float:right"><i class="fas fa-shipping-fast"></i></span> ';
    
    return $price;

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

【讨论】：

这行得通！至少对于简单的产品。有没有办法让它也适用于可变产品？谢谢一百万！

@Matt 我已经重新测试了代码，它也适用于我的测试服务器上的可变产品......

好的.. 我会再看看我的其他代码，看看我是否有什么东西阻止它在可变产品上工作。再次感谢您的帮助！！！

如何编写自定义 css 以将图标定位到最右侧？就像现在一样，图标立即显示在价格之后。

修复了这个问题，必须将 .price 上的 css 设置为 inline-block 并像魅力一样工作！