単一アイテムフィールドの前に通貨記号を設定する方法

はじめに

単一商品支払いフィールドの前に通貨記号を設定しますか？デフォルトでは、このフィールドを使用し、商品タイプがユーザー定義に設定されている場合、通貨記号は表示されません。

しかし、このチュートリアルでは、簡単なスクリプトを使用してこれを実現する方法を示します。

フォームの作成

まず、新しいフォームを作成し、フィールドを追加します。

フォームの作成にヘルプが必要な場合は、この便利なドキュメントを確認してください。

商品タイプのセットアップ

フォームに他のフィールドを追加したら、フォームビルダー内の支払いフィールドの下にある単一商品フォームフィールドを追加してください。追加したら、商品タイプをユーザー定義に設定します。

スニペットの追加

フィールドが設定されたので、サイトにスニペットを追加する時間です。スニペットをサイトに追加する方法と場所については、このチュートリアルを確認してください。

/**
 * Set a currency symbol in the Single Item payment field
 *
 * @link https://wpforms.com/developers/how-to-set-a-currency-symbol-before-a-single-item-field/
 */

function wpf_add_dollar_symbol_to_singleitem() {
    ?>
    <script>
      document.addEventListener( 'DOMContentLoaded', function() {
		  
		// Look for the form ID 3382 and the field ID 17
        var inputElement = document.querySelector( '#wpforms-3382-field_17' );
		  
		// Add left padding to create space for the dollar symbol
        inputElement.style.paddingLeft = '1em'; 
		  
		// Set background position
        inputElement.style.backgroundPosition = 'left center'; 
		  
		// Set background repeat
        inputElement.style.backgroundRepeat = 'no-repeat'; 
        
		// Define the desired padding size
        var paddingSize = '5px'; 
		  
		// dollar symbol svg
        var backgroundImage = 'url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'14\' height=\'14\' viewBox=\'0 0 12 12\'%3E%3Ctext x=\'' + paddingSize + '\' y=\'10\' font-size=\'14\' fill=\'%23000\'%3E%24%3C/text%3E%3C/svg%3E")';
		  
		// Set background image with the dollar symbol and padding
        inputElement.style.backgroundImage = backgroundImage; 
		  
      });
    </script>
    <?php
    }
    add_action('wpforms_wp_footer_end', 'wpf_add_dollar_symbol_to_singleitem', 30);

このスクリプトは、フォームID3382とフィールドID17を探し、ドル（$）記号のSVGアイコンをフィールドの先頭に配置およびスタイル設定します。このスクリプトで適用されるCSSスタイルは、仕様に合わせて簡単に適応および変更できます。SVG画像の詳細については、W3Cドキュメントを参照してください。

これでフォームを表示すると、フィールド内に通貨記号が表示されます。

これで、単一商品支払いフィールドに通貨記号を設定するために必要なすべてが揃いました。単一商品支払いフィールドに最小金額を設定しますか？価格フィールドに最小金額を設定する方法のチュートリアルをご覧ください。

関連

アクション参照: wpforms_wp_footer_end