Using the official UAE Dirham (AED) currency symbol in your WooCommerce store not only enhances the professionalism of your website but also aligns with local standards and improves user trust.
In this blog post, we’ll guide you step-by-step on how to replace the default “AED” text symbol with the new UAE Dirham currency icon using a live image in WooCommerce.
Why Use the UAE Dirham Symbol?
The UAE introduced a new currency symbol to represent the Dirham (AED) to standardize its identity similar to other global currencies like $, €, and ₹. Using this symbol provides:
– A more visual representation of the currency.
– Brand localization for UAE-based or targeting customers.
– Better UX on multilingual or multi-currency websites.
Steps to Use the UAE Dirham Symbol in WooCommerce
Step 1: Use a Public Image of the Dirham Symbol
We’ll use the official symbol image hosted on Wikimedia:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/UAE_Dirham_Symbol.svg/960px-UAE_Dirham_Symbol.svg.png
Step 2: Add Custom Code to functions.php
Go to your theme’s `functions.php` file and add the following code:
add_filter( 'woocommerce_currency_symbol', function( $currency_symbol, $currency ) {
if ( $currency === 'AED' ) {
$image_url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/UAE_Dirham_Symbol.svg/960px-UAE_Dirham_Symbol.svg.png';
$currency_symbol = '<img decoding="async" src="' . esc_url($image_url) . '" alt="AED" style="display:inline-block;width:0.8em;height:1em;vertical-align:middle;margin-right:4px;">';
}
return $currency_symbol;
}, 10, 2 );
add_filter( 'woocommerce_price_format', function( $format ) {
return '%1$s%2$s'; // Symbol before the price
});
This filter replaces the AED currency symbol with an inline image of the Dirham symbol.
Step 3: Make It Responsive
The inline `style` ensures the icon scales nicely with text. You can further enhance responsiveness by tweaking the width/height based on your theme design.
Final Output
Instead of displaying: AED 150.00
It will now show: [Icon] 150.00
SEO Tip:
If your store targets UAE customers, using local currency formats and symbols can help with better local search visibility and user trust.
Need Help?
If you’re not comfortable editing theme files, consider using a child theme or reaching out to a developer.
Enhance your WooCommerce store for the UAE market with the official Dirham symbol today!
