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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.1 Introduction

Welcome to this course on advanced theming with WooCommerce. In this lesson, I’ll give you an overview of what you’ll be learning throughout the course and what you’ll be building as you follow along.

Related Links

1.1 Introduction

Hello, and welcome to this Tuts+ course on WooCommerce. In this course, we're going to be working with the store that we already created in an earlier Tuts+ course on WooCommerce theming. And we're going to add some extra features to that store to help people navigate around the store, find what they want to buy, and encourage them to make purchases. The first thing well do is add a product video to one of our products and I'll show you how you can use a plug-in to help you do that. First, I'll show you some examples of how videos can be used in online stores. For example, on this site for simply hike, the video is used to show people how to erect a tent. Also, it really helps with their SEO because when you look for this specific tent in Google, the first result you get is the Simply Hike website. We'll then use the WooCommerce HTML5 Video plugin to enable videos in our store. So here's our Happy Ninja t-shirt. If I scroll down, what we'll be doing is adding a video tab with a video in it. Now I'm gonna stream a video from You Tube. You can stream a video from anywhere you want on YouTube, it doesn't have to be from your own channel, but alternatively you might want to upload your own videos. And we'll take a look at how to do that as well. We'll then make the video responsive so that it resizes with the browser window and it fills its containing element perfectly. And we'll use this technique documented in A List Apart on creating intrinsic ratios for video, which provides us with some CSS that will insert into our themed stylesheet and we'll make our video responsive. Once we've added the video, we'll move on to adding a mega menu to our site. And I'll start by showing you some examples of mega menus, how they can be used and different types of mega menu on different stores. And here's an example on John Lewis and I'll show you a few more. So in our store, we'll add a mega menu that will have links to categories and products as well as images. And we'll add styling for those images so everything is laid out perfectly and to do this we'll use the Max Mega Menu Plugin. Once we've used the Mega Menu Plugin, we'll add a filter menu to our site. And again I'll show you some examples of filter menus and how they're used on a variety of stores. Here's an example on the next website. So this is the Filter menu that we'll create here. We'll add some custom attributes and then we'll use those attributes to let people filter products. Now the great thing is these widgets are all bundled with WooCommerce. So you've already got them when you've installed WooCommerce and you don't have to pay anything for them. So that's what we're gonna do with our store during this course. In the next part of the course, we'll have a quick recap on what the site's looking like before you start. So we'll have a look at the site that was created in the previous course, to give you an idea of the starting point. See you next time and thanks for watching.

Back to the top