将自定义图标添加到产品价格

Question

我在启用了WooCommerce的WordPress网站的主页内创建了“最新产品”行。我现在想实现的目标是在价目表的两侧插入一个图标。

我知道如何通过硬编码将<i class="fa fa-circle fa-rotate-270" aria-hidden="true"></i>直接添加到网络文件中，但是我已经使用了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文件你活跃的孩子主题（或主题），或任何插件文件。

此代码已经过测试并可正常工作。