February 4, 2026
How to embed 3D models on your WordPress website
Customers want to see products from every angle before they buy. Photos are good, but 3D is better. In this comprehensive guide, we show you how to add interactive 3D viewers to your WordPress website. Whether you use Gutenberg, Elementor, Divi, or WPBakery, you'll learn exactly how to embed 3D models that let customers rotate, zoom, and explore your products as if they were holding them in their hands.
Why add a 3D viewer to WordPress?
Online shoppers have changed. They no longer accept flat images as the only way to evaluate products before buying. They want to rotate, zoom, and explore products as if they were holding them. A 3D viewer gives them that experience, helping them understand exactly what they're buying before they click the order button.
Think about the last time you bought furniture online. Did you wonder if the colour would match your room? Did you question whether the size was right? Did you hesitate because you couldn't quite picture the finish? These doubts cost online retailers billions in lost sales and returns every year. 3D viewers eliminate this uncertainty.
Research shows that 61% of customers are more likely to buy from brands that use immersive technology like 3D viewers. When customers can see every angle and detail, they feel confident about their purchase. They know exactly what will arrive at their door, so they commit instead of hesitating.
The numbers tell the story: websites with 3D product viewers see 44% higher add-to-cart rates and 21% longer session times. Customers who interact with 3D spend more time on your site, explore more products, and are significantly more likely to complete a purchase. This isn't marginal improvement, it's a fundamental shift in how customers engage with your products.
For WordPress site owners, adding 3D has historically been complex. You needed developers, custom code, and expensive hosting solutions. That's no longer the case. Modern tools make it possible to add professional 3D viewers to any WordPress site in minutes, not weeks.
What you need to get started
Adding a 3D viewer to WordPress is simpler than most people expect. You need just two things:
- A 3D model in GLB format (the standard file format for 3D on the web)
- A WordPress website (any theme works, any hosting provider)
GLB is the binary version of glTF, which stands for Graphics Language Transmission Format. It's the industry standard for 3D on the web because it loads quickly, displays consistently across devices, and includes all textures and materials in a single file. Most 3D design software can export to GLB, including Blender, SketchUp, and professional CAD tools.
Where do you get a 3D model? There are several options depending on your budget and requirements. You can commission a custom model from a 3D designer or agency, which typically costs €200-€500 for simple products and more for complex items. You can download existing models from marketplaces like CGTrader, Sketchfab, or TurboSquid, though these rarely match your exact products. Or you can use a product-to-3D conversion service.
We offer a 3D modelling service starting at €50 per model, specifically designed for e-commerce products. We work from your product photos to create accurate 3D representations that show your products exactly as they are. Visit Portal to learn more about getting your products converted to 3D.
The quality of your 3D model directly impacts the customer experience. A poorly made model with incorrect proportions or missing details can hurt your brand more than no 3D at all. When commissioning or selecting models, look for accurate geometry, proper textures, and realistic materials. The model should match your actual product as closely as possible.
The challenge of hosting 3D yourself
You might wonder: why not just upload the GLB file to my WordPress media library and embed it myself? While it's technically possible to host 3D files on your own server, there are several challenges that make this impractical for most WordPress users.
- Server configuration: your server needs proper CORS headers, correct MIME types for GLB files, and adequate memory limits. Most shared WordPress hosting is not configured for serving large 3D assets.
- Performance: 3D files are large, often several megabytes. Without a proper CDN (Content Delivery Network), your models will load slowly for visitors in other regions, leading to frustrated customers who leave before the 3D even appears.
- Mobile compatibility: not all 3D rendering approaches work reliably across all devices and browsers. iOS, Android, Chrome, Safari, and Firefox all have slightly different WebGL implementations. A solution that works on your laptop might fail on your customer's phone.
- No insights: if you host 3D yourself, you won't know how many people are actually viewing your models. You can't tell which products get the most 3D engagement or whether customers prefer certain angles.
- Maintenance burden: browsers update, WebGL evolves, devices change. Self-hosted 3D solutions require ongoing technical maintenance to ensure they keep working across the web ecosystem.
These challenges explain why most WordPress site owners who try to implement 3D themselves end up frustrated. The initial setup might work, but maintaining a reliable 3D viewer across all devices and browsers becomes a constant headache.
For most shop owners, a hosted solution is much more practical. You upload your model to a service designed for 3D hosting, get an embed code, and it just works. The hosting provider handles all the technical complexity while you focus on selling products.
Portal: 3D hosting made simple
Portal is our self-service platform for hosting 3D models. You upload your model, we host it on fast servers worldwide, and you get an embed code that works anywhere. No technical setup, no servers to configure, no compatibility issues.
Think of it as YouTube for 3D. We handle the tech, you focus on your products.
What Portal includes
Portal handles all the technical complexity: hosting, rendering, device compatibility. Here's what you get:
Fast global hosting
Your models load quickly for visitors anywhere in the world. Our CDN serves your 3D content from edge locations close to your customers, ensuring fast load times whether they're in Amsterdam, New York, or Sydney. Fast loading isn't just about user experience; it directly impacts whether customers wait for your 3D viewer or leave for a competitor.
One-line embed code
Copy a single line of code and paste it into any page builder. Works with Gutenberg, Elementor, Divi, WPBakery, Beaver Builder, and any platform that supports custom HTML. The embed code is responsive by default, automatically adapting to whatever container size you place it in. No CSS tweaking required.
View analytics
See how many people view your 3D models, which models are most popular, and track trends over time. Unlike self-hosted solutions where you're flying blind, Portal gives you insights into how customers engage with your 3D content. You'll know which products benefit most from 3D and can make data-driven decisions about your product presentation.
AR included
Augmented reality is automatically included with every model you host. Customers viewing your products on mobile devices can tap a button to place your product in their space using their smartphone camera. This feature alone can significantly impact purchase confidence, especially for furniture, décor, and larger items where size and fit matter.
How to add 3D to WordPress
Adding 3D to your WordPress site takes just four steps. The entire process can be completed in under five minutes once you have your 3D model ready.
Create a Portal account
Sign up at portal.virtualdisplay.io. Registration takes less than a minute and doesn't require a credit card. You can upload your first model immediately to see how it looks before committing to a plan.
Create a Portal accountUpload your model
Drag and drop your GLB file into the upload area. Portal automatically processes your model, optimises it for web delivery, and prepares it for viewing across all devices. You can preview the model before publishing to ensure it looks exactly right.
Copy the embed code
Click the embed button on your model's page and copy the code snippet. The embed code is a single line of HTML that tells browsers where to load the 3D viewer and which model to display. You can customise options like initial camera position before copying.
Paste in WordPress
Open your WordPress page or product in the editor and add the embed code using your page builder. Detailed instructions for each major page builder follow below. Once saved, your 3D viewer is live and visitors can start interacting with your product.
WordPress page builder instructions
The embed code works with any page builder that supports custom HTML, which is virtually all of them. Here's how to add your 3D viewer in each of the most popular WordPress page builders. Follow the instructions for the builder you use.
Gutenberg (Block Editor)
In your page or post editor, click the + button to add a new block. Search for "Custom HTML" and select it. This block accepts raw HTML code, which is exactly what we need for the 3D embed.
Paste the embed code from Portal directly into the HTML block. You'll see the raw code in edit mode, which is normal. Don't worry about the code looking complex; it will render as a proper 3D viewer when visitors see the page.
Click "Preview" in the top-right corner to see your 3D viewer in action. Check that the viewer loads correctly and that you can rotate and zoom the model. If everything looks good, publish your page.
Elementor
Edit your page with Elementor and find the section where you want the 3D viewer to appear. In the widget panel on the left, search for "HTML" and drag the HTML widget to your desired location.
In the HTML widget settings on the left panel, paste the embed code into the "HTML Code" text area. The widget will initially show the code as text in the editor.
Use Elementor's responsive preview modes (desktop, tablet, mobile) to verify the viewer looks good on all screen sizes. The embed code is responsive, but you may want to adjust the section padding or column width for optimal presentation.
Divi Builder
Open your page in the Divi Builder and navigate to the section where you want your 3D viewer. Insert a new row (single column works best for 3D viewers), then click to add a new module.
Search for and select the "Code" module. In the module settings, paste the embed code into the "Content" text area. Save the module settings.
For the best visual impact, use a full-width row so the 3D viewer has room to breathe. Consider adding some padding above and below the viewer to separate it from other content. Preview your page to confirm the viewer loads correctly.
WPBakery Page Builder
Edit your page with WPBakery and click "Add Element" where you want the 3D viewer. Search for "Raw HTML" or "Text Block" with HTML mode, and add it to your page.
Paste the embed code into the HTML content area and save. WPBakery will display a placeholder in the editor. Preview the page in a new tab to see the actual 3D viewer.
Other page builders
The embed code works with any page builder that accepts HTML. Look for options like "Custom HTML", "HTML Block", "Raw HTML", "Code Module", or similar. If you can paste HTML code, the 3D embed will work.
Tips for the best 3D viewing experience
- Keep model file size under 10MB for fast loading times. Larger files work but take longer to load, which can lose impatient visitors. If your model is too large, ask your 3D designer to optimise it by reducing polygon count or compressing textures.
- The viewer automatically adapts to any container width, so it works on all screen sizes. However, 3D viewers work best with some breathing room. Don't squeeze them into narrow columns where customers can't comfortably rotate and zoom.
- Always test on mobile devices before going live. Most online shoppers browse on phones, so the mobile experience matters more than desktop. Check that touch controls work smoothly and that the model is clearly visible on smaller screens.
- Place the 3D viewer at the top of product pages, in the area visitors see without scrolling. If customers have to scroll down to find your 3D viewer, many won't discover it. Position it prominently where it can immediately capture attention and demonstrate your product.
Building WordPress sites for clients?
If you're a web agency or freelance developer, 3D can be a powerful differentiator for your client projects. Furniture stores, product manufacturers, interior designers: they all benefit from interactive 3D, but few agencies offer it.
We offer white-label solutions for agencies. You can embed our 3D viewers in client projects under your own brand. Your clients get cutting-edge 3D technology, you get a new revenue stream and happier customers.
Get started today
Adding 3D viewers to WordPress is now easier than ever. Upload your model to Portal, paste the embed code into your page builder, and you're live. No coding skills required, no server configuration needed, no ongoing technical maintenance. Your 3D viewer will work across all devices and browsers, automatically. Try it with your first model and see the difference 3D makes for your customer engagement.
Ready to add 3D to your WordPress site?
Upload your first model and get an embed code in minutes.