WooCommerceで価格の前にテキストを追加する方法»価格の前にテキストを追加する

公開: 2020-10-05

WooCommerceの価格の前にテキストを追加する WooCommerceの価格の前にテキストを追加しますか? これがあなたが探している解決策である場合、WooCommerceで価格の後にテキストを追加する方法に関するチュートリアルで共有したような単純なコードスニペットを使用して、WooCommerceで価格の前にテキストをすばやく簡単に追加する方法を示します。

理想的には、そのチュートリアルで述べたように、WooCommerceページまたはWordPressページにテキストまたはコンテンツを追加するには、WordPressフィルターフックを使用する必要があります。

WooCommerce&WordPressフック

基本的に、フィルターフックは、WooCommerceまたはWordPressページに表示されるコンテンツを通常の「フィルター」のようにフィルターするように設計されていますが、この場合、新しい変更が追加され、コンテンツが一緒に返され、表示される特定のポイントがあります。

WooCommerceの価格に違いがない前にテキストを追加するには、前のチュートリアルで使用したのと同じイベント(WooCommerceの価格接尾辞を追加する方法)でフィルターフックを使用します

WooCommerceの価格プレフィックスを追加

説明のために、すべてのWooCommerceチュートリアルで使用したのと同じセットアップを使用します。ローカルホストにデフォルトのWooCommerceテーマがインストールされているStorefrontがあります。 上の図に示されている部分の価格の前に口実を追加します。

WooCommerceで価格の前にテキストを追加する手順

WooCommerce製品ページの価格の前にテキストを追加するコードを作成するには、約3つの手順を実行できます。 これらの手順の概要を以下に示します。

  1. WooCommerceサイトにログインし、テーマエディターに移動して、コードスニペットを追加するfunctions.phpファイルを開きます。
  2. WooCommerceの価格「イベント」をフックするフィルターフックを作成します。これは「woocommerce_get_price_html」であり、フィルターフックをadd_filter( 'woocommerce_get_price_html', 'njengah_text_before_price' );することができます。
  3. 価格の前に追加するテキストを使用してコールバック関数を作成します。 コールバック関数は、新しい価格を返す前に、$ priceパラメータを渡し、新しいテキストを追加する必要があります
  4. これらの変更を保存し、フロントエンドが機能するかどうかを確認します。

さて、いくつかのコードで説明する時が来ました。 価格が「推奨小売価格」になる前に追加したいテキストをRRPと略します。

WooCommerceテーマのfunctions.phpファイルに次のコードを追加すると、価格の前にテキストが追加されます。

 / **
 *価格の前にテキストを追加
 * / 

add_filter( 'woocommerce_get_price_html'、 'njengah_text_before_price');

関数njengah_text_before_price($ price){

    $ text_to_add_before_price = 'RRP'; //括弧内のテキストを好みのテキストに変更します 
		  
		  
	$ text_to_add_before_priceを返します。 $ price;
		  
}

このコードをfunctions.phpファイルに追加し、変更を保存した後。 下の画像に示すように、価格の前にテキストが追加されている場合は、フロントエンドを確認してください。

WooCommerceの価格の前にテキストを追加する

上記のように、WooCommerce製品ページの価格の前にテキストを追加することに成功しました。

しかし、発生する可能性のある一般的な質問は、製品が販売価格であるため、2つの価格の間にテキストを追加する方法です。

これは、製品が販売されているかどうかを確認し、コードを次のように変更することで実現できます。

 / **
 *販売価格の前にテキストを追加
 * / 

add_filter( 'woocommerce_get_price_html'、 'njengah_text_onsale_price'、100、2);

function njengah_text_onsale_price($ price、$ product){
  
  if($ product-> is_on_sale()){
    
	  $ text_to_add_before_price = str_replace( '<ins>'、 '<ins> <br> RRP'、$ price);
	  
			$ text_to_add_before_priceを返します;
    
	    }それ以外{
     
	 $ priceを返します。
  
   }
  
}

このコードを追加すると、下の画像に示すように、販売価格の前にテキストが表示されます。

WooCommerceの価格の前にテキストを追加する

最後に、前のチュートリアルで追加したフィルター(WooCommerceで価格の前にテキストを追加する方法)と作成したこのフィルターを組み合わせて、WooCommerceの価格の前後にテキストを追加する完全なソリューションを得ることができます。

WooCommerce製品ページの価格の前後にテキストを追加するための完全なコードは次のようになります。

 / **
 *価格の前後にテキストを追加します
 * / 

add_filter( 'woocommerce_get_price_html'、 'njengah_text_before_and_after_price'、100、2);

関数njengah_text_before_and_after_price($ price){
  
    $ text_to_add_before_price = 'RRP'; //引用符で囲まれたテキストを好みのテキストに変更します 
    
       $ text_to_add_after_price = 'ブレーキャーのペアの場合'; //引用符で囲まれたテキストを好みのテキストに変更します
	  
    $ text_to_add_before_priceを返します。 $ price。 $ text_to_add_after_price;
  
  
}

ご覧のとおり、必要なフィルターフックは1つだけですが、コールバック関数の戻り値の変数を組み合わせて、価格の前後のテキストを出力します。

結論

このWooCommerceチュートリアルでは、製品ページの価格の前にテキストを追加する方法の概要を説明し、前のフィルターを組み合わせてWooCommerce製品の価格の前後にテキストを追加できることも示しました。

このコードは、子テーマのfunctions.phpファイルに配置し、変更を有効にするために更新する必要があります。 このコードスニペットをさらにカスタマイズする必要がある場合は、いつでもお気軽にご連絡ください。

同様の記事