Standard translation plugins often degrade WooCommerce performance by creating duplicate post entries for every product in every language. MultiLipi eliminates this overhead. By injecting our Commerce Infrastructure Script into your theme header, you enable real-time neural translation for your entire catalog—cart, checkout, and dynamic feeds included—without impacting your server response times.

This guide details the integration process using the standard WordPress/WooCommerce theme architecture.

1. Deployment Prerequisites

Before editing your theme files, ensure you have:

Admin Access

FTP/SFTP access or permissions to use the WordPress Theme File Editor.

Child Theme (Recommended)

We strongly suggest making these changes in a Child Theme. If you edit the parent theme directly, your changes may be overwritten during a theme update.

Kunci API MultiLipi

Located in your Dashboard under Settings > General.

2. Step 1: Access Theme Architecture

We will inject the script into the global header (header.php) to ensure it loads before the WooCommerce cart fragments.

Option A: Using WordPress Admin (Easiest)

Log in to your WordPress Dashboard.
Navigasikan ke Appearance > Theme File Editor.
In the right-hand file list, locate Theme Header (header.php).

Option B: Using FTP/CPanel (Advanced)

Navigasikan ke /wp-content/themes/your-active-theme/.
Open header.php .

3. Step 2: Inject the Commerce Script

Scroll through header.php to find the closing </head> tag.

Tindakan: Paste the following infrastructure block immediately above the </head> line.

HTML

<script 
    src="https://multilipistorage.blob.core.windows.net/static/JS/page_translations.js" 
    multilipi-key="YOUR_API_KEY_HERE" 
    mode="auto" 
    data-pos-x="50" 
    data-pos-y="50" 
    crossorigin="anonymous">
</script>

⚠️ Critical Config:

Mengganti YOUR_API_KEY_HERE with your actual MultiLipi API Key.
Nota: Si data-pos-xdan data-pos-y attributes control the default position of the widget. You can adjust these values (0-100) to move the floating switcher if it overlaps with your "Chat" or "Back to Top" buttons.

Klik Update File (or Save via FTP).

4. Step 3: Validation & Funnel Testing

Commerce requires rigorous testing. Verify the integration across the entire buyer journey.

Clear Caches

If you use WP Rocket, W3 Total Cache, or server-level caching (Varnish/Nginx), purge all caches immediately.

Visual Check

Reload your storefront. The Language Switcher should appear in the configured position (Bottom-Left by default).

Checkout Verification

Add a product to the cart. Switch languages. Proceed to Checkout.

Success Criteria:

Ensure the Checkout fields (Billing Address, Payment Methods) are translated and functional.

5. Commerce Optimization

MultiLipi is designed to handle dynamic WooCommerce elements out of the box.

⚡

Zero-Database Load

Unlike WPML or Polylang, we do not create separate posts for each product translation. Your database remains light, ensuring fast queries.

🛒

Dynamic Cart Fragments

Our engine automatically detects AJAX cart updates (e.g., when a user changes quantity) and translates the new totals instantly.

🎯

SEO Automation

We automatically generate hreflang tags for your product pages, ensuring Google Shopping and local search engines index your items in the correct currency and language context.

MultiLipi – Panduan Integrasi WooCommerce