FREELessons: 15Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Configuring How Products Are Displayed

Hello, and welcome back to this tuts+ course, on getting started with WooCommerce. We've now got our product set up, and we've assigned categories and tags to them. And the next thing to do, is to use those categories in the way they're displayed in the store. And to do that we use the customizer. So if I go to appearance and customize, And I'll select WooCommerce, Product Catalog. So here's our store page. The moment you can see the images aren't showing up quite right, because they're square thumbnails. We'll fix that in a moment. First we're gonna configure how they're gonna display. So I'm gonna show categories and products. So you can see that we need to add an image for this other novels and stories, which I'll do shortly. And here we've got each of our series listed. Now alternatively, we could just show the categories And then if you clicked on that, you'd see all the books. So that's another option. So in fact, that's what I'm gonna do. And then in the category pages, we're in a category now, you can show products, subcategories, or both. Now we don't have any subcategories. So I'm just gonna show products. And then we have sorting and we'll stick with default sorting for this. Now how many products per row do we want? I'm gonna change this to four. And the rows per page. Hang on a moment, it seems to us Got a bit weird. So there's four, and then rows per page. We're not gonna have more than four rows. If we've got four books being shown across, so we'll stick with that. So I'll click Publish to save that. And then I'm gonna go back to some more WooCommerce settings. And I've got the product images here. Now at the moment, these are shown is square one to one images. So I'm gonna customize that. We can use a custom aspect ratio, that's four to three which is wrong. So what I want to use here is five to eight. And then we get our books laid out as you would expect. A little bit narrow, so let's try five to seven. Note they're being cropped a bit. So let's stick with five to eight. There we go. So we've now got four of those listed next to each other. Now let's have a look at what we get if we go in a category. And there we've got three books next to each other with the prices and the buy on Amazon or add to cart. Depending on what we've set it up as, because that one is an external product. So again we'll publish that. Okay, back. Now here you can configure restore notice if you want And you can also configure the checkout. I'm gonna hide the company name field. I'm gonna make the phone field optional. In fact, I'm going to hide it. I don't need people's phone number. Privacy Policy, we've got terms and conditions. I'm gonna have that going to the privacy policy right now. But we need to add Terms and Conditions page later on. And then the privacy policy. This is some text that we can edit if we want to. So here you can see this is the checkout page. So again, I'm going to publish that because I'm happy with that. I'll close the customizer and we're back in the products. And if I go to the store page. So now we need to add an image for this. So let's go into our category, edit that and I'll add an image of one of the books that comes into that category. Now if we've got the store. You can see that we've got those. So that's how you configure the way that your store looks, using your products and using the images in the products. In the next part of the course, I'm gonna move on from product categories to something a little bit more complex. And that's product attributes and variable products. And I'll show you how you can use those to make more than one version of a product available. See you next time, and thanks for watching.

Back to the top