Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:13Length:1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.1 Introduction

Welcome to this course on Developing a WooCommerce Theme, which takes you through the steps you need to follow to create your own custom store theme for use with WooCommerce.

1.1 Introduction

Hello, and welcome to this Tutsplus course on WooCommerce theme development. My name's Rachael McCollin, and in this course, I'm gonna show you how to create your own bespoke WooCommerce theme so that your WooCommerce store will look exactly as you want it to. So let's take a look at what we're gonna do. This is the shop that we're gonna be creating during this course and as you can see there are plenty of products already in there and there are some customizations as well. Now I've already created a theme that's gonna hold this store and what we'll do is we'll add extra files and functions to that theme as we work through the course which will make it work with WooCommerce. So one of the first stages in this course will to be look at the theme that we will be using so that you understand how it works. What we'll also do is that we'll take a look at the WooCommerce admin, specifically, how to add products. Now you can see here, I've got a whole load of products added into my store. Now I haven't added these manually. I've used the dummy data that comes provided with WooCommerce to make my life easier. And this is really useful if you are developing a store for a client who is going to be adding their own products or you're developing a store theme that you're gonna release to the public. Because it means you've got dummy data you can use to test all the different aspects of your store, make sure everything's working great, and then delete the data afterwards so you've got a nice empty store to work with. So what I'll do is I'll show you how to import this dummy data so that you can use it in your store. Going back to the store itself, what we'll also do is we'll look at how to add content to the home page. So here, these images we're gonna add during the course of these videos and what we'll do is we'll use a hook that's provided WooCommerce with a function in our theme to populate that page in the right place. We're also gonna work on the product category archives, which relate to each of the departments in your store. And again, we're gonna use a hook provided by WooCommerce to add this image and the description here. And then moving on from that, we're gonna look at the product page. We're gonna change some of the styling on this page. And we're also gonna change the images that are output here and make them smaller than what's output by default. And we'll do that not just using CSS, but by writing a function which overrides a pluggable function in WooCommerce and changes what's output. We'll then move on to the search page. The search page that comes with WooCommerce by default isn't really all that helpful. So we'll add some more text to it and some images to help people navigate around the site. We'll then move on to the checkout pages and we'll add some text at the top of the checkout page. So you can see how that's done. So that's what we'll be doing during this course. In the next part, we'll look at WooCommerce in more detail. See you next time and thanks for watching.

Back to the top