Convert WooCommerce Prices to EUR with SiteLocaleAI
Published on SiteLocaleAI.com
International shoppers expect prices in their local currency, and a seamless translation of product details boosts both conversions and SEO. In this tutorial we’ll walk through a self‑hosted implementation of SiteLocaleAI for a WooCommerce store that:
- Detects European visitors.
- Translates the page on the fly using your own LLM API key (Claude, GPT‑4o‑mini, etc.).
- Converts and rounds prices to EUR with psychological pricing.
- Pre‑renders the translated pages for search‑engine indexing via the CLI.
Prerequisites
- WordPress with WooCommerce installed.
- Access to an LLM API key.
- Basic familiarity with JavaScript and WordPress theme editing.
1. Install the SiteLocaleAI WordPress Plugin (no Node.js required)
- Download the plugin from the SiteLocaleAI marketplace.
- Upload it via Plugins → Add New → Upload Plugin.
- Activate the plugin and go to Settings → SiteLocaleAI.
- Paste your LLM API key and set the Target Language to
en(or any source language you use). - Enable Price Localization and choose EUR as the default currency.
The plugin automatically injects the SiteLocaleAI JavaScript bundle into every front‑end page.
2. Add a Custom Price‑Localization Script
While the plugin handles basic price conversion, you may want fine‑grained control (e.g., psychological rounding). Add the following snippet to your child theme’s functions.php or a custom plugin:
add_action('wp_footer', function() {
?>
<script>
// Initialize SiteLocaleAI (drop‑in library)
const localeAI = new SiteLocaleAI({
apiKey: '<YOUR_LLM_API_KEY>',
sourceLang: 'en',
targetLang: 'en', // keep text in original language for SEO
priceCurrency: 'EUR',
rounding: 'psychological' // 19.99, 24.99, etc.
});
// Helper: fetch live EUR conversion rate from your preferred service
async function getEurRate() {
const resp = await fetch('https://api.exchangerate.host/latest?base=USD&symbols=EUR');
const data = await resp.json();
return data.rates.EUR;
}
// Convert WooCommerce price elements after the page loads
async function localizePrices() {
const rate = await getEurRate();
document.querySelectorAll('.woocommerce-Price-amount').forEach(el => {
const usd = parseFloat(el.dataset.usdPrice || el.textContent.replace(/[^0-9.]/g, ''));
if (isNaN(usd)) return;
let eur = usd * rate;
// Psychological rounding: nearest 0.99
eur = Math.floor(eur) + 0.99;
el.textContent = `€${eur.toFixed(2)}`;
});
}
// Run after SiteLocaleAI finishes translation
localeAI.on('ready', localizePrices);
</script>
<?php
});
What this does
- Loads the SiteLocaleAI library with your API key.
- Pulls a live USD→EUR rate (you can replace the endpoint with a cached rate for performance).
- Rounds to the nearest 0.99 to create a more appealing price point.
- Updates every element that WooCommerce marks with the class woocommerce-Price-amount.
Tip: Store the conversion rate in a transient (WordPress cache) to avoid hitting the exchange‑rate API on every page load.
3. Enable SEO‑Friendly Pre‑Rendering
Search engines can’t execute JavaScript the same way browsers do, so we’ll use the SiteLocaleAI CLI to generate static, translated snapshots of your product pages.
# Install the CLI globally (requires Node.js locally for the build step only)
npm i -g @sitelocaleai/cli
# Generate static HTML for all product URLs in the "products" folder
sitelocaleai prerender \
--input https://yourstore.com/wp-json/wp/v2/products \
--output ./prerendered \
--lang en \
--currency EUR \
--api-key <YOUR_LLM_API_KEY>
After the command finishes, upload the prerendered folder to your server (or configure your web host to serve these files for bots using a robots.txt rule). The result is a set of fully translated, EUR‑priced pages that Google can index instantly.
4. Verify the Implementation
- Open the site in an incognito window with a European IP (or use a VPN). You should see:
- All product titles and descriptions in the original language (or translated if you set a different target language).
- Prices displayed as
€XX.99.
- Check the page source (
Ctrl+U). You’ll find the translated HTML because the CLI pre‑rendered version is served to crawlers. - Run a Lighthouse audit → Performance should stay high because the price conversion runs after the initial paint.
5. Advanced: Combine with Other Locales
If you also sell to the UK, you can extend the script to detect the visitor’s country via the navigator.language or a geo‑IP service and switch the currency dynamically:
const localeMap = {
'de': 'EUR',
'fr': 'EUR',
'en-GB': 'GBP',
// add more as needed
};
const userLang = navigator.language || navigator.userLanguage;
const targetCurrency = localeMap[userLang] || 'USD';
localeAI.update({ priceCurrency: targetCurrency });
Now the same store can serve EUR, GBP, or USD with a single codebase.
6. Resources & Further Reading
- Detailed API reference: https://sitelocaleai.com/docs/api
- SEO pre‑rendering guide: https://sitelocaleai.com/docs/seo-prerender
7. Ready to Boost Your International Sales?
Deploy SiteLocaleAI in minutes, keep full control of your LLM keys, and watch your European conversion rates climb. Try SiteLocaleAI today and turn every visitor into a local shopper.