为产品价格添加自定义图标

Question

我在启用了 WooCommerce 的 WordPress 网站的主页中创建了一个 'Latest Products' 行。我现在想要实现的是在价格输入的两边插入一个图标。

我知道如何通过硬编码将 <i class="fa fa-circle fa-rotate-270" aria-hidden="true"></i> 添加到 Web 文件中，但是我使用了 WooCommerce 简码来调用此类产品，因此我不确定现在如何实现这一点.我使用的简码是：[recent_products per_page="4" columns="4"]

我需要在 functions.php 文件中输入一个条目吗？

如有任何帮助，我们将不胜感激。

Answer 1

有多种方法可以做到，这里有 2 个…

1) 最简单的方法（假设是针对简单产品）是使用挂钩在 woocommerce_price_html 过滤器挂钩中的自定义函数来显示您的产品价格这个图标：

add_filter( 'woocommerce_price_html', 'prepend_append_icon_to_price', 10, 2 );
function prepend_append_icon_to_price( $price, $instance ) {
    // For home page only and simple products
    if(is_front_page()){
        // Your icon
        $icon = ' <i class="fa fa-circle fa-rotate-270" aria-hidden="true"></i> ';
        // Prepending and appending your icon around the price.
        $price = $icon . $price . $icon;
    }
    return $price;
}

代码在您的活动子主题（或主题）的 function.php 文件或任何插件文件中。

此代码已经过测试并且有效。

2) 您还可以使用挂钩在 wp_footer 操作挂钩中的自定义函数来注入 jQuery 价格周围的图标：

add_action( 'wp_footer', 'prepend_append_icon_to_price' );
function prepend_append_icon_to_price() {
    if(is_front_page()){
    ?>
        <script>
            (function($){
                var myIcon = ' <i class="fa fa-circle fa-rotate-270" aria-hidden="true"></i> ';
                $('.home .woocommerce .price').prepend( myIcon ).append( myIcon );
            })(jQuery);
        </script>
    <?php
    }
}

代码在您的活动子主题（或主题）的 function.php 文件或任何插件文件中。

此代码已经过测试并且有效。

为产品价格添加自定义图标

Adding a custom icon to product prices

php

wordpress

jquery

product

woocommerce