If you are running a WooCommerce webshop, and you want to implement a 3D product viewer for your WooCommerce product pages, you have come to the right place!
In this step-by-step guide we will show you how you can easily add 3D product viewer to your WooCommerce product pages.
It will only take about 10 minutes, so let’s get started!
In this post:
Implement a 3D product viewer for WooCommerce
Here’s a step-by-step guide to help you implement a 3D product viewer for your WooCommerce webshop.
Step 1: Prepare your 3D model
Make sure your 3D models are in a web-friendly format, such as glTF
Step 2: Optimize the 3D models for fast page loads
Optimize your 3D models for the web to ensure faster loading times. You can use a tool like Blender for example.
Step 3: Upload your 3D models to WordPress or a CDN
Upload the optimized 3D models to your server or a content delivery network (CDN) that supports static files.
Not sure what to choose? Compare CDN vs. Local hosting.
Step 4: Install the Visody 3D product viewer for WooCommerce plugin
- Go to your WordPress admin dashboard.
- Navigate to “Plugins” > “Add New.”
- Search for “Visody”
- Install and activate the plugin.
Step 5: Add 3D viewer to products
- After activation, go to your WooCommerce products page and look for the “Visody Viewer” tab
- Check the first box to activate the viewer and set the 3D model for the product. Optionally choose to display the viewer inline and add a 3d model poster instead of the default loading screen.
Step 6: Configure the model viewer settings
- Go to Visody tab in your admin menu and go to viewers. Add a new viewer.
- Here you can configure all the 3d model display settings, like rotation, target point, shadow, lightning and model zoom.
- You can also personalize the 3D model viewer buttons and colors. Simply go to the Settings page and start customizing.
Step 7: Test the 3D product viewer
- View the product page to ensure the 3D product viewer is working correctly.
- Test on different devices and browsers to ensure compatibility.
If you experience any compatibility issues, feel free to contact us!
