3D and Video Product Viewer for Woocommerce

Blog Staff

June 28, 2023

Product Image and Gallery block and Dynamic Gallery block support image replacement with 3d files and video files, youtube videos

There are two ways to add files.

File Gallery in Product Gallery

On each product edit page, you will see next

Here, you must add an image which will be used as a preview and a fallback image and file. Currently, next formats are supported

Video (mp4, webp, mov)
Youtube and Vimeo Links
3d (GLTF, GLB)
Spline 3d (.splinecode)

Depending on the file format, the plugin will show the corresponding viewer. It will be a video player, model viewer, spline 3d viewer, or Youtube in Lightbox

Image Attachment replacement

This is a second way to assign files in the gallery. All supported formats are the same, but this time, you must add the file URL directly to the image attachment.

You can access the Attachment edit screen when you upload something in WordPress. Also, you can access it in Media section of WordPress.

The difference from the previous is that this will replace image attachment globally on site. In any product for which you use this image, it will be replaced by a file viewer. Also, it will be used in the Dynamic Gallery block and in Image variations.

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

<p><a href="https://greenshiftwp.com/woocommerce-product-image-and-gallery/" data-type="post" data-id="2908">Product Image and Gallery block</a> and <a href="https://greenshiftwp.com/dynamic-gallery-block/" data-type="post" data-id="2675">Dynamic Gallery block</a> support image replacement with 3d files and video files, youtube videos</p>

<p>There are two ways to add files.</p>

<h2 class="wp-block-heading" id="file-gallery-in-product-gallery">File Gallery in Product Gallery</h2>

<p>On each product edit page, you will see next</p>

<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/06/productgallery-503x1024.jpg" alt="" class="wp-image-3242" width="377" height="768"/></figure>

<p>Here, you must add an image which will be used as a preview and a fallback image and file. Currently, next formats are supported</p>

<ol>
<li>Video (mp4, webp, mov)</li>

<li>Youtube and Vimeo Links</li>

<li>3d (GLTF, GLB)</li>

<li>Spline 3d (.splinecode)</li>
</ol>

<p>Depending on the file format, the plugin will show the corresponding viewer. It will be a video player, model viewer, spline 3d viewer, or Youtube in Lightbox</p>

<h2 class="wp-block-heading" id="image-attachment-replacement">Image Attachment replacement</h2>

<p>This is a second way to assign files in the gallery. All supported formats are the same, but this time, you must add the file URL directly to the image attachment. </p>

<p>You can access the Attachment edit screen when you upload something in Wordpress. Also, you can access it in Media section of Wordpress. </p>

<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/06/galleryview-edited.jpg" alt="" class="wp-image-3176" width="746"/></figure>

<p>The difference from the previous is that this will replace image attachment globally on site. In any product for which you use this image, it will be replaced by a file viewer. Also, it will be used in the Dynamic Gallery block and in Image variations.</p>

<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2023/06/woogallerymedia.mp4"></video></figure>