Integrations
Integrations
3D Configurator
3D Configurator

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>)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>3D Viewer Popup</title>

  <!-- Optional Google Font, we use Poppins everywhere :D -->
  <link
    href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"
    rel="stylesheet"
  />

  <style>
    /* Minimal CSS for Modal and Button */
    body { font-family: 'Poppins', sans-serif; }
    .view-3d-btn { background-color: #007bff; color: #fff; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; }
    .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
    .modal-content { background: #fff; width: 90%; max-width: 800px; margin: 10% auto; padding: 20px; border-radius: 12px; text-align: center; position: relative; }
    .close-btn { position: absolute; top: 10px; right: 15px; font-weight: bold; cursor: pointer; }
    .iframe-container { width: 100%; height: 500px; }
    iframe { width: 100%; height: 100%; border: none; }
    .show { display: block; }
  </style>
</head>
<body>
  <!-- Trigger Button -->
  <button class="view-3d-btn" onclick="openModal()">View in 3D</button>

  <!-- Modal Structure -->
  <div id="popupModal" class="modal">
    <div class="modal-content">
      <span class="close-btn" onclick="closeModal()">&times;</span>
      <h2>3D Viewer</h2>
      <div class="iframe-container">
        <!-- Triorama 3D Link Inserted via JavaScript -->
        <iframe id="viewerIframe" src=""></iframe>
      </div>
    </div>
  </div>

  <script>
    function openModal() {
      document.getElementById("popupModal").classList.add("show");
      document.getElementById("viewerIframe").src = "https://live.triorama.ai/p/scene_0b3aaece6880429e846c8b72ef31b2fe_0000dd";
    }

    function closeModal() {
      document.getElementById("popupModal").classList.remove("show");
      document.getElementById("viewerIframe").src = "";
    }

    // Close modal when clicking outside it
    window.onclick = function(event) {
      if (event.target === document.getElementById("popupModal")) {
        closeModal();
      }
    }
  </script>
</body>
</html>

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:

jsCopyEditdocument.getElementById("viewerIframe").src = "https://live.triorama.ai/p/your_model_id";

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:

A gif showing Trioram 3D viewer of an electric scooter being launched

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.

What is Triorama?
Previous
What is Triorama?
Previous
What is Triorama?
Previous
How to Integrate Triorama’s 3D Viewer in WooCommerce
Next
How to Integrate Triorama’s 3D Viewer in WooCommerce
Next
How to Integrate Triorama’s 3D Viewer in WooCommerce
Next