將自定義圖標添加到產品價格

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文件你活躍的孩子主題（或主題），或任何插件文件。

此代碼已經過測試並可正常工作。