Localize WooCommerce Prices to EUR with SiteLocaleAI
Published on SiteLocaleAI.com
International shoppers expect prices in their local currency, and a seamless conversion can dramatically improve conversion rates. In this tutorial we’ll walk through how to use SiteLocaleAI to automatically convert WooCommerce product prices to EUR for European visitors, apply psychological rounding, and ensure search engines see fully translated pages.
1. Why Use SiteLocaleAI for Price Localization?
- Drop‑in JavaScript library – works with any front‑end framework (React, Vue, plain HTML) and even WordPress without Node.js.
- Self‑hosted – you keep full control of your LLM API keys (Claude, GPT‑4o‑mini, etc.).
- Psychological rounding – prices are rounded to the nearest .99, .95, or .49, which feels cheaper to shoppers.
- SEO pre‑rendering CLI – generates static, translated HTML for crawlers, boosting international SEO.
2. Install the SiteLocaleAI Library
Add the script tag to your theme’s header.php (or any global template). The library is framework‑agnostic, so you don’t need a build step.
<script src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"></script>
Then initialise it with your LLM API key and the target currency:
// Initialise SiteLocaleAI
SiteLocaleAI.init({
apiKey: 'YOUR_LLM_API_KEY', // e.g., Claude or GPT‑4o‑mini
defaultLocale: 'en-US',
supportedLocales: ['en-US', 'de-DE', 'fr-FR', 'es-ES'],
priceConfig: {
baseCurrency: 'USD',
targetCurrency: 'EUR',
rounding: 'psychological' // enables .99, .95, .49 rounding
}
});
Tip: Keep the API key in a server‑side environment variable and inject it into the page via PHP to avoid exposing it publicly.
3. Hook Into WooCommerce Price Rendering
WooCommerce provides filters that let you modify the price before it’s displayed. We’ll use woocommerce_get_price for the raw price and woocommerce_get_price_html for the formatted output.
<?php
// functions.php or a custom plugin file
add_filter('woocommerce_get_price', 'sitelocaleai_convert_price', 10, 2);
add_filter('woocommerce_get_price_html', 'sitelocaleai_format_price', 10, 2);
function sitelocaleai_convert_price($price, $product) {
// Only convert for European IPs – we’ll rely on SiteLocaleAI’s locale detection
// The JS library will replace the price on the client side, but we also store the EUR value for SEO.
return $price; // No server‑side conversion needed for the demo
}
function sitelocaleai_format_price($price_html, $product) {
// Append a data attribute that the JS library will read
$price = $product->get_price();
$price_html = '<span class="sitelocaleai-price" data-usd="' . esc_attr($price) . '">' . $price_html . '</span>';
return $price_html;
}
?>
The <span> with class sitelocaleai-price tells the front‑end script which numbers to localize. The library will:
1. Detect the visitor’s locale (using IP or browser settings).
2. Fetch the latest USD→EUR conversion rate via a free API (e.g., exchangerate.host).
3. Apply psychological rounding (e.g., 19.99 EUR instead of 20 EUR).
4. Replace the inner text of the span.
4. Client‑Side Conversion Logic (Handled by SiteLocaleAI)
You don’t need to write any extra JavaScript – the library automatically scans for elements with the sitelocaleai-price class. If you want to customise the rounding rules, you can extend the config:
SiteLocaleAI.updateConfig({
priceConfig: {
rounding: {
method: 'psychological',
steps: [0.99, 0.95, 0.49] // custom thresholds
}
}
});
5. SEO‑Friendly Pre‑Rendering
Search engines often struggle with client‑side translations. SiteLocaleAI’s CLI can pre‑render translated pages so crawlers see the final EUR prices.
# Install the CLI globally (Node.js required only for the build step)
npm i -g @sitelocaleai/cli
# Run pre‑rendering for the German locale
npx sitelocaleai prerender --locale de-DE --output ./public/de
The command fetches every product page, applies the same price conversion logic, and writes static HTML to ./public/de. You can then serve these files from a sub‑directory or a CDN. Search engines will index the EUR‑priced pages, improving international rankings.
6. WordPress Plugin (No Node.js Needed)
If you prefer a zero‑code approach, install the SiteLocaleAI WordPress plugin:
1. Upload the plugin zip via the WordPress admin.
2. Activate it and paste your LLM API key in the settings page.
3. Enable “Price Localization” and select EUR as the target currency.
The plugin automatically injects the script tag, adds the required data attributes to WooCommerce price HTML, and runs the CLI in the background on a schedule.
7. Testing the Implementation
- Open your store in a browser with a VPN set to Germany.
- Inspect a product price – you should see a
<span class="sitelocaleai-price" data-usd="49.99">49,99 EUR</span>. - View the page source (Ctrl+U). The price will appear in USD because the conversion happens client‑side. To verify SEO rendering, request the pre‑rendered URL (
/de/product‑slug) and confirm the EUR price is present in the raw HTML.
8. Monitoring & Analytics
SiteLocaleAI logs conversion events to the console. For production, forward these logs to a monitoring service (e.g., Sentry) to track:
- Conversion rate per locale.
- Rounding impact on average order value.
- Any fallback to USD when the conversion API fails.
9. Next Steps
- A/B test the rounded prices vs. exact conversion to measure impact on sales.
- Add currency‑specific tax rules using WooCommerce’s built‑in tax settings.
- Expand to other EU currencies (GBP, PLN) by updating
priceConfig.targetCurrencyand adding locale‑specific rounding.
10. Resources
- Detailed setup guide: https://sitelocaleai.com/docs/getting-started
- Price localization API reference: https://sitelocaleai.com/docs/price-localization
Ready to go global?
Boost your WooCommerce store’s international performance with SiteLocaleAI. Try it today and see how effortless price localization can be!