When you have successfully activated the plugin, you can start adding 3D models to your WooCommerce products
Important! Make sure your product has a product thumbnail set. Otherwise the product 3D viewer will not appear. The 3D viewer uses the image as the base layer to derive the width and height from.
Preparing the 3D model
The model viewer only supports GLB and glTF 3D model types.
If you have any other type, simply visit the Three.js model editor website.
When you have uploaded the 3D model to the editor, simply go to File -> Export as GLB or glTF
Or use your favorite 3D modelling software to export the file as GLB / glTF.
Adding the 3D model to the product gallery
When you have your GLB or glTF model ready, you can go to the product page you want to display your 3D model on.
Go to Edit product and locate the Visody Viewer tab, which looks like this:
Here you can set your 3D model.
You have two options:
- Upload the 3D model to the WordPress media library
- Enter an URL to the location of the 3D model (in case you want to host 3D models elsewhere)
Simply save the product and visit the product page.
You will now see a new 3D button in your WooCommerce product gallery.
If you enable inline viewer, you will directly see the model loaded in your product gallery.
You can also choose to use the product thumbnail as the 3D viewer loader image so the product shows up as ‘normal’ on first load.
Finally, you can select your viewer template.
Note: “Viewer notes” is a PRO plugin field which allows you to select annotations for the 3D model.
Using shortcode
Since version 1.0.4 you can also choose to show the 3D viewer anywhere on the product page using a shortcode. Instead of showing the viewer inside the product gallery.
To achieve this, enable the option “Show product viewer inline at shortcode location instead of WooCommerce Gallery”
And enter the following shortcode anywhere on the product page:
[visody_viewer]And save the product. You will see that the 3D viewer becomes visible in given shortcode position. And not visible anymore in the product gallery.
Updating 3D model variations
You can also update the 3D model based on the selected product variation.
Please read this article for more information on this topic.