Divi Machine 9 - Category Loop Module

ha PT a-- back with another video this tutorial we're going to be showing you how to add categories on your archive pages so yes it's right now we have our filter we have our product our posts and we have our order bar so let's just focus on search it shows all the products all the cars so if you've been following this the series you'll know this isn't specific just for cars but here we go so in the theme builder lets up the firm are much Heather's loud to be honest but we can add we can go back for you if you want so here I like to add a category loop so the category loop module is the module that that shows you all the categories that are available so at the moment because we on the archive page is going to show me all the categories now the categories are when we in cause categories here we can see all our categories so yeah I have like four four on the convertible seven the coupe a zero in the state so you see because there's zero in the state it's not going to show you can make it show if you want and I'll show you how in a minute so let's just first off going on skip the first few settings and just go down to grid columns here you can change the columns at the moment is three so I think it'll look better if we did fall because we have four that are available you know you can change the tablets and you can change the mobile you can hide or show the description so where you get the description is in say convertible you add the description here and you can show or hide that if you want because I have no description it isn't really showing it for me so that's fine I don't really want the description on my sites you can order it by name or category order you can hide empty categories which is by default or you can show them all so here I can show all the categories but I want to hide in okay so that is kind of the very very basic version of this so what I'll do is I'll just save it and reload this page you can see now when somebody clicks on Convertible it'll take them just to the convertible cause we have in Sitwell we haven't set up this template yet so it still looks like the default one but let's go back okay now what happens if we want an image let's say we want to have an image for each of these category are terms how do we do that well we're going to be using advanced custom fields for this as well going to advanced custom fields and add a new field group in the new field group I want to add cause cats agree and here all the fields I want to be adding for this add a new field image field top is image okay now I think it is post taxonomy is equal to okay now I started first taxonomy equal to it yes so sorry I just a little bit of a mind blank there so what you want to choose is go down to taxonomy is equal to and then choose your category so at the moment because we're using cause every cars category but if you're building a house listing websites or a documentation website or a team members website it'll obviously be called something different so we have an image let's publish this and then head over to our cause categories in our convertible will see this new option over here which is image here we can add an image so let's add a convertible doesn't really matter I'm gonna add this white one updates while the cause we have graph coupe a no sorry go to coupe a blender new tab saloon and SUV the SUV I think I have this Range Rover via update that go into the cube a this one the blue one how does not shake over this one I won and saloon I mean I may have it wrong but whatever so if you reload the page nothing's gonna show it's still gonna show you these normal category names let's go let's reload the page reload our theme builder go back into our archive page and in here we want to in this module gonna edit it and in there we want to have a category image name so if you want to have an image we need to choose the advanced custom field that we've used and here you can see as you go to the bottom it says image and it gives you cars category so you know this is the one that you choose so here we go I want to choose that and yeah it pulls in the cause title on top of image or I want to have title below image those are the options now we'll add some more options in the future but that's that's really how you do it and yeah it's pretty easy pretty straightforward this module it really helps you to make it easier for the you know so now on this page and I can say or actually I want to go to SUVs now the beauty of this though is you can actually use icons as well so I'm just gonna pull in a while we here and show put an a let me this sorry I'm sure pause this quickly okay I'll just a pause I just put an icon so well you can also do if you really want to get adventures with your designs is in your categories now you can go actually for SUV instead of having an image I want to have an icon and I can just show you get this icon put it in I mean I probably wouldn't choose this one for myself personally and there you can have an icon and you could also you know play with the size I'm just going to do in love with you know I don't know 50 pixels so there so you could have a nice little row of all your different you know nice representation rather than images of the different categories if you click on that it'll take you through to the SUV page okay so that is how you add categories they're all categories to our cart page so we have our search on she searched through you have your categories I'm actually gonna change that back because it looks a bit odd by itself but if I was gonna you know if it was me going to be creating this at night and I'd ended at the end of the series I'm going to be actually finalizing the side nothink I'm gonna actually use our cons for that's at that stage okay so thanks very much for watching this video and I hope that's been helpful and we'll see you the next one

Channel: Divi Engine

Views: 2,396

Keywords: divi machine, divi, custom post, acf, divi enigne, custom fields, ajax filter, ajax load more, search forms, divi listings

Id: Wn7o55pjTts

Length: 8min 9sec (489 seconds)

Published: Wed Jul 01 2020