4.1 Filter Menus Overview

Hello and welcome back to this tuts plus course on WooCommerce. If you've been following along, you still will now have some product videos and it'll also have a mega menu. We're now going to move on to adding another type of menu that's really useful in the store and that's the filter menu. Instead of taking you to navigation links, this lets you filter the products that you're looking at. So for example on a clothing store like ours you can filter by size, and we'll edit some of our products to note what sizes are available and colors as well, and then people can filter using sizes and colors giving them an idea of what's in stock. But first we'll take a look at some examples of how filter menus are used in some real-life stores. Let's start with Next. We've looked at this store earlier on in the course, but this is the womenswear section, specifically the pages on jeans. Instead of having navigational links here, that take you to particular brands, for example, what it enables you to do is filter color that you want, the fit, the size available, leg length and quite a lot more. And the filter that an individual shopper would do will be quite different from what another shopper would do. So, let's find blue jeans in a skinny fit that are available in a size 8. Here we have the results of that. We can filter further by adding leg length to find long jeans, for example. We now have all jeans available according to our criteria: long, size eight, skinny blue women's jeans. Let's go a bit further down, and look for a waistline. We'll give it a standard waistline. And now we've only got four items. So, if you wanted to be even fussier, you could then filter by price. And here we've got a range. So let's take that down to the cheaper end of the spectrum and there's only one left here. So a shopper looking for a very specific product, would be able to use this filter menu to find the pair of jeans that exactly met their needs. Here's another filter menu on Amazon. This is the children's book section of Amazon. So first, I'm going to shop for a 10-year-old. I can either click here for ages 9 to 11, or I can click down here. It's up to me. And then I'll filter a bit more for age 10. So this gives me a range of books that would be suitable for a 10-year-old. Now, let's filter a bit more. I want good books the people have rated highly. So, I'll click on the four stars and up option. And I also want to spend between five pounds and 10 pounds on each book. I can then filter by Genre. So let's select Comics and Graphic Novels. And at finally, I want books that will be delivered the next day, so I've selected Prime Eligible. And you can see here all my filters are listed across the top. Now, this gives me just two books, out of a possible list of thousands when I started. So, it gives me a good idea of what I might want to buy my son for his birthday. The Apple Store also uses filtered menus. It makes them look a bit different from most sites. It has them on the righthand side. And instead of having clickable links, there are buttons which are still clickable links, but they've been styled differently. I can sort however I want. I am going to start with the cheapest ones first. I can then select the Mac that I want my sleeve to be compatible with. And I can choose a color. Let's go for orange. So, here there are two products that meet my criteria and I've filtered those down. Now, these aren't necessarily the top pair but you can see quite clearly on the righthand side what I've selected. Because they're outlined in blue. You could argue from an accessibility point of view this should be shown at the top of the page as well as using a visual clue like that blue outline. Here's another one. The Carphone Warehouse. So lets say I'm looking for a particular kind of phone and instead of searching by brand, I want a 4G phone, I want it to run on the O2 network, and I want to choose some features. So I'll choose games. Camera, and music. I can also choose color. Let's go for a silver one, and you can see the list has narrowed. Now, I can go for the monthly cost up to 35 £ a month The upfront cost up to 75 pounds a month. So I've just got three phones to choose from here, and that has helped me narrow down my choices from the large list of phones that was available when I started. And finally, eBay site uses filters extensively, because it has so many products on it, you really need to use a filter to find what you're looking for. Here, we've got computer cases, so let's try to find a blue one that's got front USB ports. Is used, because we're looking for a good bargain, and it's in the UK. So now there are 39 listings and you can see that my criteria here used UK only, USB and Blue and to get rid of any of those, I just click on the x and that gives me a few more options to chose from, so now I've got 40 listings. So those are some examples of filter menus. They tend to be down on the left-hand side, and they tend to give you lots of options of things that you can turn off and on in terms of attributes of the products, searches, the color, brand, the size, and so forth. And we're going to add some more attributes to our products so that we can add those to the filter menu and help people find exactly what they're looking for. In the next part of this course, we'll start to create our filter menu. And the great news is that WooCommerce comes with a couple of widgets already bundled that will enable us to create our filter menu. So we'll insert those in the sidebar, and we'll set them up. See you next time, and thanks for watching.