カスタムアイコンを商品価格に追加する

Question

私はWooCommerce対応のWordPressウェブサイトのホームページ内に「最新の商品」の行を作成しました。私が今達成したいのは、価格入力の両側にアイコンを挿入することです。

私はしかし、私はそのような製品を呼び出すためにWooCommerceのショートを使用しているので、私は今、これを達成できるかわからない、ウェブファイルに直接ハードコーディングを通じて<i class="fa fa-circle fa-rotate-270" aria-hidden="true"></i>を追加することができます方法については承知しています。私が使用しているショートコードは：[recent_products per_page="4" columns="4"]

functions.phpファイルに入力する必要がありますか？

この件に関するお手伝いがあれば、幸いです。

Answer 1

1）最も簡単な方法（つまり、単純な製品のためであると仮定）は、woocommerce_price_htmlフィルタに夢中にカスタム関数を使用することです...そこにそれを行うには複数の方法であり、ここではあなたがそれらの2を取得お使いの製品の価格の周りには、このアイコンを表示するためにフック：

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）あなたはまた、価格arroundのjQueryを使ってあなたのアイコンを注入するwp_footerアクションフックに引っかけカスタム関数を使用することができます。

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ファイルに行きますあなたのアクティブな子供のテーマ（またはテーマ）または任意のプラグインファイルにもあります。

このコードはテスト済みであり、動作します。