Show products in 3D on WordPress and WooCommerce
One plugin does both: a [splat_viewer] shortcode for any page, and, on WooCommerce shops, a “3D file” field on each product.
1. Install the plugin (once)
- In the splat-viewer package, find the
wordpressfolder. Compress thesplat-viewerfolder inside it into a ZIP file (Windows: right-click, Send to, Compressed folder; Mac: right-click, Compress). - In WordPress, go to Plugins, Add New Plugin, Upload Plugin. Choose the ZIP file, then Install Now, then Activate.
To check: “Proteus3D Viewer” is listed under Plugins as active.
2. Upload the product files
Go to Media, Add New Media File, and upload the product’s .sog file and its photo. Click each one and copy its “File URL”; you need them next.
3a. On a WooCommerce product
- Open the product (Products, then the product’s name).
- In Product data, General, paste the
.sogfile’s URL into “3D file (.sog)”. Update.
The product’s main image is the poster. Products with an empty field look exactly as before.
3b. On any page or post
Add a Shortcode block and type, with your two file URLs and a few words for people who can’t see the picture:
[splat_viewer src="PASTE THE .sog URL" poster="PASTE THE PHOTO URL" alt="Oak chair"]
Optional: width="400px", auto_rotate="1" (turns slowly until touched), view="URL of a .view.json", up="+z".
4. Check it
Open the page or product. The photo shows first, then turns into the 3D product. If only the photo stays, check the file URL, and that the .sog upload finished. Still stuck: send us the page address.
Website builders that don’t allow scripts
Some hosted builders (for example, some Wix or Squarespace plans) only allow an embedded frame. Then put the whole splat-viewer package and your product files on any web space you control, and embed embed.html from it with the builder’s “Embed” or “iframe” element:
https://YOUR-SPACE/splat-viewer-__VERSION__/embed.html?src=/products/chair.sog&poster=/products/chair.webp&alt=Oak%20chair
Not yet tried on a real WordPress or WooCommerce site.