Setting Up Product Video for WooCommerce
Adding A New Product Video:
Title: Enter a unique product video title for future reference
Product Video Type: Select the video type (YouTube, Facebook, Dailymotion, Vimeo, MetaCafe, Custom Upload).
Video ID: Add the ID of the video you want to add
- For YouTube: If you’re embedding a YouTube video, paste the video ID found after “https://www.youtube.com/watch?v=”
- For Facebook: Paste the link of your video from Facebook (e.g., “https://www.facebook.com/facebook/videos/”)
- For Dailymotion: If your video is on Dailymotion, enter the Dailymotion video ID (e.g., “x5z1gzv”).
Note: Only use the video ID that comes after “https://www.dailymotion.com/embed/video/”
- For MetaCafe: Enter the Metacafe video ID (e.g., “11858937/top-benefits-of-woocommerce/”).
Note: Only use the video ID that comes after “http://www.metacafe.com/watch/”
- Custom Upload: If you want to add a custom video, choose between two options:
- Upload Files
- Media Library
Video Thumbnail: Select an eye-catching thumbnail for your video
- Upload: Upload an image directly from your computer or choose one from the media library
- Remove Image: Option to delete the selected thumbnail
Attach With Products: Choose the product(s) to attach the video to
Click “Publish” to save the changes
Setting Up WooCommerce Product Videos
Configuring the Product Videos
General Settings:
When using the Product Videos for WooCommerce plugins, you can set preferences for embedded and self-hosted videos separately.
Find the general settings by going to WooCommerce > Settings > Product Videos
1) General
- Gallery Template: Select the gallery template you want to apply
- HTML 5 Lightbox Gallery Template
- Custom Woo Gallery Template
- Gallery Position: Choose where the gallery thumbnails will be displayed in the custom woo gallery. There are four options to choose from:
- Top
- Bottom
- Left
- Right
- Play Icon: Select an icon style to show on the video thumbnail
- Style 1
- Style 2
- Style 3
- Style 4
- Style 5
- Thumbnail to Show: Set the number of thumbnails that you want to show in Custom Woo Gallery
- Autoplay: Gallery thumbnail autoplay option
- Arrows: A checkbox for arrow control functionality
- Dots: Check or uncheck this box to enable or disable dot navigation for the gallery
Click “Save Settings” to save the changes
2) Self-Hosted Featured Videos:
When you host your custom videos, you can adjust these settings:
- Auto Play Video: Choose from a “Yes” or “No” option to allow or disallow autoplay of the featured video
- Is Loop: Choose “Yes” or “No” to let the featured video repeat in a loop
- Mute Video: Choose “Yes” to set the video on mute by default
- Show Video Controls: Choose between “Yes” or “No” to determine whether video controls are visible or hidden during playback
- Video/Thumbnail Width ( Shop Page ): Set the width of the featured video or video thumbnail on the shop page
- Video/Thumbnail Height ( Shop Page ): Set the height of the featured video or video thumbnail on the shop page
- Video/Thumbnail Width ( Product Page ): Set the width of the featured video or video thumbnail on the product page
- Video/Thumbnail Height ( Product Page ): Set the height of the featured video or video thumbnail on the product page
3) Third Party (Featured Video):
From this section, you can change settings for third-party featured videos:
- Auto Play Video: Choose from a “Yes” or “No” option to enable/disable autoplay of third-party video
- Allow Full Screen: Choose from a “Yes” or “No” option to allow or disallow featured video to play in full screen
- Mute Video: Choose “yes” to set the video on mute by default
- Show Related Videos: Choose from a “Yes” or “No” option to enable/disable showing related videos
- Video/Thumbnail Width ( Shop Page ): Specify the width of the featured video or video thumbnail on the shop page
- Video/Thumbnail Height ( Shop Page ): Specify the height of the featured video or video thumbnail on the shop page
- Video/Thumbnail Width ( Product Page ): Specify the Width of the featured video or video thumbnail on the product page
- Video/Thumbnail Height ( Product Page ): Specify the Height of the featured video or video thumbnail on the product page
- Shop Page Facebook Video Width: Specify the width of the Facebook Feature videos for shop page
- Product Page Facebook Video Width: Specify the width of the Facebook Feature videos for product page
4) Third-Party Product Gallery Video:
This setting is applied to the HTML5 Lightbox Gallery.
- Auto Play Video: Allow or disallow auto play of gallery video when open in a popup
- Allow Full Screen: Allow or disallow full-screen display of gallery video when open in a popup
- Mute Video: Mute gallery video when open in a popup
- Show Related Videos: Choose “yes” to show related videos
5) Elementor/Divi Builder:
Page Edited by Elementor or Divi Builder: Enable to edit pages using Elementor or Divi Builder
Enabling Featured Videos for Individual Products
Configuring Product Level Settings
To enable featured videos on specific products, log in to your WP Admin Panel, and navigate to the “Products” section. Locate and select the product you want to add a featured video to and click “Edit.”
- Enable Featured Video: Choose “yes” to replace the featured image with a featured video.
- Enable Featured Video on Shop Page: Option to enable featured video on the shop page (note: this will replace the featured image with the chosen featured video)
- Enable Featured Video on Product Page: Check this option if you want to enable featured video on the Product page (note: this will replace the featured image with featured video)
- Enable Featured Image as First Gallery Image: Enable this if you want the current featured image to appear as the primary image in the product gallery after adding the featured video
- Video Thumbnail: Set a suitable thumbnail for the video (You can upload this thumbnail either from your Media Library or directly from your computer)
Note: When a thumbnail is added to the video, clicking on the thumbnail will open a popup window where the video will start playing
- Featured Video Type: Choose the type of the Featured Video. You can choose from these six options:
- Youtube
- Dailymotion
- Vimeo
- Metacafe
- Custom Upload
- Video ID: For the chosen video type, enter the corresponding video ID
These settings let you easily highlight videos on specific products, both on the shop page and individual product pages, enhancing your product presentations with engaging video content.
Editing Existing Product Videos
Edit Product Videos You Already Have
To make edits to any of the existing product videos within your WooCommerce Store, open the “Product Video” section in your WP admin panel.
Here, you’ll find yourself on a centralized dashboard showcasing essential details for all the videos you’ve added to your store, including:
- Video Title: The title of your video
- Video Type: The video type
- Date Published: When the video was added and published
Additional actions that can be taken on this page are:
- Perform bulk actions on multiple videos at once
- Search for an existing video in the search bar
- Filter the videos by dates
Note: If you’re using the plugin for the first time, this dashboard will be empty initially
