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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Our WooCommerce Theme

This lesson will recap what we’ve already built and how. I’ll give you an introduction to how we’ll be enhancing the store.

Related Links

1.2 Our WooCommerce Theme

Hello, and welcome back to this TUTS+ course on WooCommerce theme development. In this course we're going to be working with a store that we already created in another TUTS+ course. You can see the store here, and that was developed for this course on developing a WooCommerce theme. Now let's just have a quick recap on what was covered by that course. The course was designed to help you take your WooCommerce theming further and create a respoke theme for a WooCommerce store that would make that store more effective and better looking than if you just used WooCommerce out of the box. So the course covered four key areas. Firstly, we looked at planning your store theme. So, again, an introduction to how WooCommerce works, looked at some effective real life stores and how they used design to enhance the user experience. And then gave you some tips on planning your store and matching your plan to WooCommerce and the structure of its files. We then moved on to populating the store with products, which was done really simply, using some imported dummy data. Then we designed the front page. And we added image links to departments, which I'll show you in a moment. We also added feature products to the sidebar, using a widget and styling. And then finally, we edited the pages in the store. We hooked into the WooCommerce API using hooks and felters provided, and also overriding some functions. And in one case, we created a template file that was designed to replace the template file provided by WooCommerce. And we used all these techniques to create more customized pages in our WooCommerce store. Now in that course, I created the store and I added a few features using my theme files. Some of that hooked into or replaced code provided by the WooCommerce plugin. And some of it styled features that are added by WooCommerce. So let's just have a quick look at the store. Now this store has got some dummy content in it that I downloaded using a plugin. And if you want to find out how to do all that, you'll need to check out the course that I developed the store in. I also added some categories, and I added some custom content to display those categories. See here on the homepage, we've got these images that take you to the archive pages for each category. And then on the archive pages, I added an image at the top to bring the page to life. We also did some styling in that course. For example, in the sidebar here, we styled these feature products so the text was overlayed over the image. And we also added some styling to single products. So if you see this t-shirt here, the related images are smaller than they are by default in WooCommerce. As well as that, we added some custom text to the checkout and we used some of the template files provided by WooCommerce to insert content into our store. Now if you want to work along with this course, I strongly recommend checking that course out first, which is called Developing a WooCommerce Theme and you can also download the code files from GitHub. And I'll show you how to do that in more detail in the next part of this course. So let's have a quick look at what we're gonna do in this course. The changes in this course will be designed to encourage people to buy and to make it easier for people to navigate around the store. So the first thing we'll do is we'll add videos to single products, so there'll be videos displayed to help people buy. We'll then add a mega-menu, which will help people see all of the different categories of product available in the store, which will help people see all of the different categories of product available in the store and navigate around. And finally we'll add a Filter menu so that people can filter products by key characteristics and find exactly what they're looking for. So in the next part of this course, what I'll do is I'll show you how to get started. I'll show you where to download the files to start with, how to set up your store, and also have set up your development environment. That's all for this time. Thanks for watching.

Back to the top