FREELessons: 15Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 WooCommerce Storefront Inspiration

Hello, and welcome back to this test plus course on getting started with WooCommerce. In this part of course, I'm gonna give you an overview of WooCommerce itself and show you some example stores using WooCommerce so you can get some inspiration. So here we are on the WooCommerce website, and I'm actually in my dashboard here. So once you've signed up with WooCommerce and you've got an account with them, which is free because WooCommerce itself is free. You can access any downloads that you've got via this dashboard. And you can also get support and you can look in the forums. So here, there's all sorts of information and guidance to help you improve your store. Obviously a lot of this is geared towards selling add-ons, which we'll look at later in the course. But here you'll find access to developer resources, Blog, Guides, Documentations, all sorts of other things. So this is the sort of one stop shop for everything you need to find out about WooCommerce. In your own site, when you install WooCommerce, you'll get a dashboard. Now this is showing at the moment that I've still got a few things to do in my dashboard and we'll be working through these during the course. And it's also worth mentioning that you can also access WooCommerce via the WordPress plugin directory, because it's a free plugin that you install via the WordPress admin screens. So let's take a look at some example stores using WooCommerce. And you'll find that WooCommerce is incredibly customizable. So all these stores look very different, work in very different ways, and offer a very different types of brand. So here we've got Good Dye Young, which is hair dye. So we've got video at the top of the store, we've got a shop now link, and then we've got something a bit more familiar. So we've got images, which you can hover over and see the vibrant colors. And this is all, and we've got add to cart and read more buttons. You've got the option to see more. See there are two sections here. So this is Poser Paste and Lighter Daze. So there's probably using product categories to separate them out. So here we've got a custom design all using WooCommerce. Here's another one, very different. This is a typography company. The design here doesn't look anything like a standard WooCommerce store. I think you'd agree. And if I scroll down and I go to the Fonts screen, we can access these and you can buy them using the WooCommerce plugin, but this looks nothing like the WooCommerce standard interface. You can see that they've designed it so that you've got, these might be product variations or they might be different products, I'm not sure. But using a completely custom design and layout, you can buy things using the WooCommerce system. We've now got AeroPress, a coffee press. So we've got an animation on the homepage, which is very nice. And again, it just doesn't look like a standard store, but there's more information as we go through. Now let me just scroll up. Look at the menu, Shop AeroPress So here we have all the products. In fact, now, we have Cafes and Buy Now, let's, Buy Now is going to take us to the store. So here we have something that looks a little bit more like a standard WooCommerce page, but you can see that, again, you wouldn't know this was built on a free WordPress plugin. Now it's probably had an expensive bespoke design, it's probably got some add-ons. But again, it's all using WooCommerce. Here's another one, GhostBed. This one, in terms of its layout and its UI, is a little bit more familiar. Again, we've got a big home page design to tell you more about the product. But if I go into one of these options in the mega menu, we can see that what we've probably got here is a product with options and variable elements to it. So you've got variations on the product here, like the size and the mattress and so forth. So this might be set up using product variations. There might be an add-on powering this, something like the Product Options add-on that we'll be using later in the course. But the cart calculates it all as you go along, and this is all using WooCommerce. We've now got the All Blacks Shop where you can buy All Blacks merch. And let's have a look in one of the sections. These are probably using product categories, these sections that you could see on the homepage. And here you can see we've got the individual products that you can buy and add to your cart. And then finally, Huru backpack site. Now this is like a lot of fashion sites, not at all static. Let's click on one of the products. It takes a little while to load, probably using JavaScript. And you can see that here, we've got product that you can buy. So this isn't a standard grid at all, this is a page for each product, very custom designed with the image in the background and the button to add it to your cart with lots of information here. Now this may or may not be using the fields available in WooCommerce out of the box, it's probably not. It's probably got some custom code added to it, or an add-on. But again, it's using WooCommerce. So this gives you an idea of the sort of highly bespoke design you can have with WooCommerce. Now in this course, we're gonna be getting started. So I'm not gonna show you anything as advanced as this. But what I will show you is how you can add WooCommerce to an existing website and an existing theme to add a fairly straightforward grid of products to your store. So in the next part of the course, we're gonna get started doing that. I'll install the plugin, and I'll show you how to get it set up. See you next time. Thanks for watching.

Back to the top