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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.3 Getting Started

Hello, and welcome back to this Tuts+ 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 t-shirt. Now if you scroll down, what we'll add is a video tab here, with a description in 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 video from You Tube, or another source. And what I'm gonna do is embed a video from You Tube. So I've installed the plug-in on my site, as you can see here. I've got WooCommerce, and I've got the Woocommerce HTML5 Video plug-in activated. The next step is to find your video in YouTube or to upload it to YouTube. Now I'm gonna 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 in 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 in YouTube, there are full instructions here on the Create a new channel page in YouTube Help. I've 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 you're using to capture your video. So, for example, if you're using a phone to take videos, you could 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, 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 on your computer, you'll find the full instructions for uploading videos to your YouTube channel here. Uploading a video to your channel couldn't be simpler, all you do is click the upload button up here and it will ask you to find the video on your computer. It'll upload it, it will process it, and it will give you a link when it's ready. But what I'm gonna 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 HTML 5 video plugin 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 videos as I want. I'll scroll down, and you can see here there's a list of attached videos. I'm gonna 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 the 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 site and also that YouTube handles the playback for you, so it'll work on any phone or computer that people want to play it on. So I'm gonna add an embed code here, and to get that embed code, I go back to the video, and you do the same here whether its your video or whether its a video your streaming from another channel. If I scroll down here you can see a share link. I 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'll display the video. I click on add, and then as you can see, it's been added to the list of videos for this product. Now 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