How to Display Currency Symbol or Code in Magento 2 UI Component Form Fields

If you're working on a Magento 2 custom module, you might want to show the currency symbol (like $, €) or currency code (like USD, EUR) in a custom form field. This is especially useful when you're dealing with price-related attributes in the Magento admin panel.

In this post, we’ll show you how to easily display the current currency symbol or code dynamically in UI component form fields in Magento 2.

Why Display Currency Symbol or Code in Magento 2?

In Magento 2, it’s important to ensure that the currency shown to admin users is up to date with the store’s settings. By displaying the currency symbol or currency code in form fields, you help admin users clearly understand the currency used in the system.

Here are the two ways we’ll cover:

• Static Currency Symbol: Hardcoding a specific symbol.
• Dynamic Currency Symbol or Code: Fetching the symbol/code based on the store’s currency settings.

Option 1: Display a Static Currency Symbol in the Form Field

If you don’t need to change the currency and just want to show a static currency symbol (for example, $ for USD), you can easily achieve this by adding a line in the XML configuration of your UI component form field.

Example: Static Currency Symbol in Form Field

<field name="price_custom_att">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Custom Price Attribute</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">price_custom_att</item>
            <item name="dataScope" xsi:type="string">price_custom_att</item>
            <item name="default" xsi:type="string">1</item>
            <item name="addbefore" xsi:type="string">$</item> <!-- Static Currency Symbol -->
        </item>
    </argument>
</field>

Explanation:

• The line <item name="addbefore" xsi:type="string">$</item> will add a dollar symbol ($) before the input value of the price field.
• This is a quick solution when you want to show a specific symbol for the price field, such as for USD.

Option 2: Display a Dynamic Currency Symbol or Code

For a more flexible solution, you may want to display the currency symbol or currency code dynamically. This means the symbol or code will automatically update based on the store’s current currency settings.

How to Implement Dynamic Currency Symbol/Code

To implement a dynamic currency symbol or currency code, we’ll check a file that handles UI components in the backend Eav.php file located here:

vendor/magento/module-catalog/Ui/DataProvider/Product/Form/Modifier/Eav.php

Step 1: Edit the Eav.php File

In this file, you can customize the price attributes to dynamically fetch the current currency’s symbol or code.

Dynamic Currency Symbol Example:

/**
 * Customize attribute that has price type
 *
 * @param ProductAttributeInterface $attribute
 * @param array $meta
 * @return array
 */
private function customizePriceAttribute(ProductAttributeInterface $attribute, array $meta)
{
    if ($attribute->getFrontendInput() === 'price') {
        // Get the base currency symbol dynamically
        $currencySymbol = $this->locator->getStore()
            ->getBaseCurrency()
            ->getCurrencySymbol();
        
        // Set the dynamic currency symbol before the field value
        $meta['arguments']['data']['config']['addbefore'] = $currencySymbol;
    }

    return $meta;
}

Explanation:

• $this->locator->getStore(): Retrieves the store's current settings.
• getBaseCurrency()->getCurrencySymbol(): Fetches the currency symbol (like $ or €) for the current store.
• getBaseCurrency()->getCurrencyCode(): Fetches the currency code (like USD or EUR) for the current store.
• $meta['arguments']['data']['config']['addbefore']: Adds the symbol or code to the field before the value.

Step 2: Clear Cache and Compile

Once you’ve made the changes to the Eav.php file, don’t forget to:

php bin/magento cache:clean
php bin/magento setup:di:compile

This ensures that your changes are applied and Magento loads the updated configuration.

Step 3: Test the Form Field

After clearing the cache and recompiling (if needed), go to the admin panel and check your custom form field. You should now see the dynamic currency symbol (e.g., $, €) or currency code (e.g., USD, EUR) in the field before the price value.

Conclusion

In this post, we’ve covered two ways to display the currency symbol or currency code in your Magento 2 UI component form fields:

• Static Currency Symbol: Simply add a hardcoded currency symbol (e.g., $) in the XML configuration.
• Dynamic Currency Symbol or Code: Fetch the current store’s currency dynamically using the Eav.php file.

This method makes sure your store’s currency is always shown correctly, whether it's the symbol or the code, making it easier and more flexible for admins to use.

By following this guide, you can effortlessly display dynamic currency symbols or codes in your Magento 2 UI components, improving the admin experience and ensuring accurate price display. Keep your store’s currency handling flexible and your code well-organized. For more Magento tips and tricks, keep reading our blog!