Docs > Integration > WooCommerce
Content
How to Integrate Triorama’s 3D Viewer in WooCommerce
Add Triorama's AI powered 3D Viewer to your WooCommerce store in minutes. Follow these easy steps to integrate Triorama’s 3D pop-up and boost product engagement.
v1.0
Last Updated
Mar 22, 2025
Introduction
Want to showcase products in true 3D on WooCommerce? Triorama’s iFrame-based viewer lets you do just that, no special plugins required. Follow these steps to display a “View in 3D” pop-up that wows your customers and increases engagement.
Step 1: Copy the Pop-Up Code
Copy this HTML snippet for a button + modal. Replace the sample 3D link with your unique Triorama URL (e.g., https://live.triorama.ai/p/<model_id>
)
Step 2: Open Your Product Page in WordPress
Go to Products → All Products and edit the specific item you want to feature in 3D.
Step 3: Switch to HTML or Code View
If you’re using Classic Editor: click the Text tab.
If you’re using Block Editor (Gutenberg): add a Custom HTML block.
For page builders (Elementor, Divi, etc.): locate a “HTML” or “Code” module.
Step 4: Paste the Entire Snippet
Insert the code snippet from Step 1 into the editor.
If your editor strips
<html>
and<head>
tags, just copy the<style>
,<body>
, and<script>
parts into the same block.
Step 5: Update the 3D Model Link
In the function openModal()
, change the viewerIframe.src
to your unique Triorama URL.
Example:
Step 6: Save & Test
Publish or Update your product.
View it on the front end.
Click “View in 3D” to open the pop-up and confirm the 3D model loads.
That’s It!
You now have a simple 3D pop-up for WooCommerce. If all is working fine, you should see a popup like this:

And you can place the button anywhere you want. If you need more customization, like inline embeds, multiple 3D models, or styling changes, check out Triorama’s Integration Overview.