Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Adding Videos in WooCommerce

In this lesson, I’ll show you how to add a videos tab to the product data metabox in the WooCommerce admin screens using a plugin. Then we’ll add streaming video to the product page.

Related Links

2.2 Adding Videos in WooCommerce

Hello and welcome back to this tuts plus course on WooCommerce. In the previous part of this course, I showed you some real world examples of videos used on e-commerce websites. In this part of the course, we're going to start adding our own video. And what we'll do is we'll create a videos tab on an individual product page. So let's just take a look at how the product page looks right now. Here's our individual product page with a happy ninja tee shirt. Now if you scroll down, what we'll add is a video tab here with a description and the reviews, so people can watch a video relating to the product. And this will be very straightforward to set up, because we'll use a plugin, specifically we'll use the WooCommerce HTML5 video plugin. Which lets you either upload your own videos to your products, or alternatively, it lets you embed videos from YouTube or another source. And what I'm going to do is embed a video from YouTube. So I've installed the plugin on my site as you can see here. I've got WooCommerce and I've got the WooCommerce HTML5 video plugin activated. The next step is to find your video in YouTube, or to upload it to YouTube. Now I'm going to actually use a video that's relevant to my product that exists on another channel, because there's nothing to stop you using video from another channel on YouTube. And what you might find is that sometimes if you're selling something, you'll find a video on the manufacturer's channel that's more useful than anything you could produce, and will really help you sell that product. But if you do need to create your own channel on YouTube, there are full instructions here on the create a new channel page in YouTube help. I already got three channels on my account, and one of the great things with YouTube now is that you can add as many channels as you need. So you might already have a personal channel, but you can also add a channel for your store, or a channel for different brands that you're selling through your store. And then you might want to add playlists for different types of products, for example. If you want to go to uploading videos to YouTube, you can find them here in the YouTube help section. I'm not going to go through this in detail, because the way you upload video to YouTube will depend on what your using to capture your video. So, for example, if you are using a phone to take videos, you can upload them straight to YouTube from either the camera in your phone or from the YouTube app in your phone. And if you're using editing software, such as, for example ScreenFlow, which I use for screen casting, you can upload to YouTube straight from that. You insert your login details for YouTube into the settings of your software, a and then when you're happy with your video, you can just export straight to YouTube, which saves the step of saving your video and then uploading it. But if you've already got your video in your computer, you'll find the full instructions for uploading videos to your YouTube channel here. Uploading your video to your channel couldn't be simpler. All you do is click the upload button up here. And then it'll ask you to find the video on your computer. It'll upload it, it'll process it, and it'll give you a link when it's ready. But what I'm going to do here is stream a video that I found on another YouTube channel, which I think is relevant to our happy ninja t-shirt. So, let's go back to the site. Here I am in my happy ninja product, and i want to edit that product. Now the HTML5 video plug in has added another tab here in my product data meta box, so if I click on that, it gives me the option to add as many video as I want. I'll scroll down and you can see here there's a list of attached videos. I'm going to click on add to add one to this product. I'll give it a name. Making sure I type it correctly. And I'll give it a title for the video that people will see on the site. Again, correcting any typos. Now, you've got two options here, you can either embed a video from elsewhere, or you can upload a video directly to your site. The advantage of embedded video is that you don't have to worry about storage space on your side, and also that YouTube handles the playback for you, so it will work on any phone or computer that people want to play it on. So, I'm going to add an embed code here, and to get that embed code, I go back to the video. And you do the same here whether it's your video or there is a video you are streaming from another channel. By scrolling down here, you can see a share link. Click on that, and then I click on embed, and you can see there's some code here that I copy, and then I go back to my product, and I paste it here. So that's the iFrame code that will display the video. I'll click on add, and then as you can see, it's been added to the list of video for this product. And once you've done that, it's important to remember to save your product by clicking the update button over here. And then once your product is updated, you can view the product and see how your video works. So I'll scroll down, and you can see there's a new tab here for video. I simply click on the play and it plays my video for me. And that's it. We now have a video that can help you sell your product and help give people a real feel for how that product will look and how it will work, or maybe you can use it to give demonstrations or to give tips on how to use the product, set it up, or assemble it. In the next part of the course, we'll add some styling for the video. We'll give it a bit more space, and we'll also make sure it's correctly sized and fits in the window perfectly. See you next time, and thanks for watching!

Back to the top