How to Add Brands to your Divi WooCommerce store

[Music] hey guys hello and welcome to another tutorial tuesday for divi my name is roby here with the divi engine team and today i'm going to show you three ways that you can add brands to your divi website and woocommerce it's a great way to get your customers familiar and comfortable with the site by seeing brands that they know and recognize both in a text and visual manner we're going to go through doing it without plugins we're going to be using a third-party plugin that's free and then we're going to be utilizing body commerce our plug-in from the v-engine where you can utilize one of the features of the many that is included with bodycommerce to achieve brands integrated with the woocommerce site so without further ado let's get into it alrighty guys so for our first method here to add brands to our woocommerce divi install we're going to check it out on how to do it without any plugins installed we're going to use the tools natively built into woocommerce so let's jump into the back end of our site and get going so once you're in the back end of your site you're going to want to go over here to products and then attributes because we're going to be adding this brand as an actual attribute of the product similar color and size that can vary products could potentially have different brands so let's go ahead by typing in brands into the box here make sure to check this box that says enable archives because this will enable us to actually list all the products for a certain brand custom ordering is fine and we'll just go ahead and click add attribute now you see that has loaded in there now there's one thing to note here now like the color here it's got blue gray green red yellow as the various attributes that that could have so we're going to do the same thing for brands so we're going to configure the terms and then i'm going to type in nike we're going to stick with some shoe brands right now and then you can type a description in here it'll generate a slug automatically based on the brand name so we'll just say this is a description but you want to add something that's a little bit more descriptive than that maybe if you're doing like autism brand or something like that you want to put the brand story there there's a lot of different things you can do um so i'm going to click add and then just for good measure let's add one more good old reebok and say this is a description there we go add that one and there we have them so now we've got two brands here in the system now we need to go ahead and associate these brands with products so the way we do that we go over to the products by clicking on all products and we've got our list of products here i'm going to go ahead with sunglasses and i'm going to say edit and you can do it for any of the products here doesn't really matter we're not going to touch any of the other settings now we're going to go and click on attributes right here and remove that really quick looks like that was in there from a previous session that i did okay so attributes now we're going to say this drop down here that says custom product attribute i'm going to select brands and we'll add that in now you get the opportunity to go ahead and either start typing your brand like so or it'll actually let you select them if there's not too many in there right now we'll stick with nike stick the one brand for this one and we'll hit save now saving the attributes you need to do one more step and update the actual product now let's go back to all products again and just add the reebok one to this polo as an example so again we'll go down to attributes we'll select the brands attribute add it and now we'll just select our reebok one save attributes update product all right so now let's see what that looks like on the front end because we're basically all done click on view product and now we see our polo here and then when we click on additional information now we've got reebok here now if we click that it actually takes you to the archive page with all the reebok products in there so let me show you how that works really quickly so let's go back to our dashboard once here we'll go back to products oopsie all products sometimes i want to click too quickly we will just select the single option say brebox making a new smash hit we're going to say attributes brands add and now we know the story already reebok save update and then we'll view the product again and now we'll go to additional info down here now we'll click on reebok and now we see the other products so we've got a polo year that we know is reebok also and the single it's pretty easy stuff it's a great way to index the products in your site and another cool thing is you look you're up in your url bar you see it's your domain forward slash brands forward slash brand name reebok awesome stuff so let's look at how we can deepen that in the next method all right and on to our second method of incorporating brands into your divi woocommerce site we're going to be utilizing a free third-party plugin that you download right from the wordpress repository and it's super easy to use and you do some cool stuff with it taking that first method just one step further so now to do this let's start out by starting at the back end of our wordpress site and then we'll go over to plugins and then we'll go to add new and now we will search woocommerce brands hit enter and then we're going to see perfect brands for woocommerce here it's a pretty popular plugin with 40 000 active installs highly rated and it is frequently updated that's all the things you want to see in a plugin that you install on your ecommerce store so install that and it'll go and think all right installed now activated and here we go now we can easily just click on the settings button here on the install page now the other place you'd find that if you just go to woocommerce and settings over here you'll see that it's the last tab underneath your woocommerce settings uh there's some stuff that you can select here as far as you know image sizes what you want to slug for the taxonomy to be that type of thing we're going to leave all of this as is you can even create a brand's page where you can have all your brands listed on one page we won't do anything with that right now for the purposes of this but you can definitely check out the plugins documentation right here and they'll teach you how to do that we're just going to go over and hop to brands i'll open up a new tab for you and now we'll name our first brand and we're gonna go with the same sports theme nike we're gonna select now you can again change it you can add parent brands and all different things we're not dealing with that yeah we will just say this is a nike description for the description oops spell and then select the brand logo nike insert and with this one what's cool is you can add a brand banner also so we're gonna go ahead and i pre-uploaded these images but you can just download anything for whatever brands you're using i'm just gonna stick with this because it's nice and easy for me to use and that's it for this so we're gonna add the brand and then just to reinforce that we're going to add the reebok one as well this is a reebok description [Music] select the logo we've got the reebok one right there select the banner i have some nice reebok shoes there and as a brand okay cool two brands in there now the last step is very similar to the other one that we did in method one we have to go to the products section so we go to products we say all products and then we can select let's do the beanie with a logo edit that and then literally all we need to do you see this new box here on the right hand side called brands now you just need to select it so let's say this is a reebok brand update that one and let's go back to all products and give that brand one more item let's just do t-shirt and then we will also give it reebok update now what we'll do is we'll actually view the product to see what that looks like now see this is one of the funky things with running the plugin we might need to adjust the size of that you know brand uh uh logo but you kind of get the drift of what this does now we've got brand listed here in the brand section and it's got all the information brand reebok it's got the description and the logo again but now watch what happens when you click on that logo it takes you through to archive page where it lists the nice banner that we had before as well as all the products within that brand pretty cool stuff um you can do a lot of other things with this plugin but for the purposes of this demonstration you know um we're going to keep it to this but you can look around here with the different settings with individual products you can say where you want that to show um whether you want it on the product page you can see where you want to position it after the meta after the price whatever you want to do gives you a bunch of options but you know that's for you to explore but this is another way to further deepen how you would represent brands on your divi woocommerce site so for the last step and the third method we're going to take a look at one of our divi engine plugins all right guys time for my favorite method to do this because it gives you the most flexibility promise you not only because it's a divi engine product we'll be talking about here it's divi body commerce now divi body commerce as you know has hundreds of features to enhance any divi woocommerce store and over 60 modules to help you customize the pages now one of those modules we'll be using here is the attributes module now the attributes module allows you to display attributes and product loops or on the product page wherever you feel that it might make a good fit to enhance your message or just help you convert your customers and your visitors into customers so the first thing we're going to do here is going to feel sort of familiar we're going to start at the dashboard in the back end and we're going to head over to products and then attributes now when we're here we're going to add brands again we want to make sure that we enable archives here because it what makes it so easy when you click on that brand image or logo or whatever you have to take you to a page where it lists all the products found within that brand now we want to make sure and this is something that's a little different we want to want to select image here now that is just so that it displays the logo associated with that brand wherever we're utilizing that attributes module so last step here just click add attribute and boom we see it go right in there we've got image everything is good now what we're going to do next is we're going to configure the different brands found within this attribute so we click on configure terms and then i'm going to stick with the sports theme and i'm going to go with nike and we'll say this is a nike nike description and now we need to make sure we've uploaded our images already and that's not wrong though okay and then so i'll go to my library here got the nike logo i'm gonna copy that url to clipboard come back here paste that in and smash the add new brands button there we go got that right in there let's just keep up and reinforce this we'll add reebok as well say this oh yeah my fingers is a re-block description there we go and same thing we're gonna go to our library close that out get the logo copy it come back here paste it in and smash add new brand there we go awesomeness we've got two brands in here but we can see we've got no products associated yet so what we want to do is head over to the products area so i just click on all products let's select the logo collection sounds fancy wait for that load a second we'll scroll down a little bit well actually this might not be a good one since it's a group product i'm just going to head back really quick just want to avoid something that might throw us for luke we'll take the wordpress pennant we're going to make it a nike wordpress pennant scroll down and this is external affiliate product but we'll see if it works brands add and then we'll say nike because you can just select them or you can start typing them whatever you choose now important save the attributes update and it all think all right now let's check out this product and see what we see on the product page and if you hear a fan noise it is my laptop going crazy sorry guys um macbooks man anyway so coming here we'll go to the description and here we see it brands nike awesomeness so we've got a brand in there but where's that cool logo that i just told you about well let me tell you this is our product loop a single product page layout that we've assigned in body commerce so we want to edit that layout to include the attributes module now the way that we do that we're going to go back to the dashboard and we're going to go to divi engine body commerce and i'll see my brand's product page layout assigned here to the product page up here so we'll just click edit this layout it'll open up the actual layout in another tab don't mind my revisions here and come on dibby you can do it there we go is it going to load again no good so i'll just click the plus button here i want it to be right underneath this car button that i've added and you'll see all these different modules oh and see i knew it was going to do that so you'll see that there's a lot of different models on this page this is a loop or this is a product page layout that was built with the various divi engine body commerce plug-in modules that aren't included now if you're not sure on how to build a product page if you don't have one yet we've got awesome documentation at help.divi engine.com that'll teach you exactly how to do that and i'll even tell you what all these different modules do so definitely check that out we've got some brand spanking new documentation all this stuff also which looks amazing so let's get going let's add this attribute module so we'll click the plus and i'll just type in att which brings up pl attributes and there we go now you've got different options here you can add a label or a title for it i'll just say brand and then you can select the prefix or suffix all sorts of stuff but the important thing here is you want to select the correct attribute so for the attribute we're going to say product brands and here again is important to we want to be able to link to the archive page so that if we click that logo that it shows all the different products listed underneath that brand it's a great feature and you can even build out custom archive pages for this so you can per brand build awesome awesome pages that maybe if you have a site for artisan or something you can have a little description in there as to what their story is whatever the case might be the second important thing to do here is to make sure that we activate the show image color swatch and then make sure that image is selected i'm going to leave these height settings as is except for the swatch position basically what this means it'll put the swatch above the name below the name or you can remove the name i'm going to remove it because i think it'll look better and it's kind of redundant we're here because of that brand recognition we want to bank on that we want to capitalize on it so they work hard to build that reputation we are going to ride the wave with them so i'm going to select remove name and that's it i'm going to click that i'm going to update my page or layout and i'll load for a second okay great now i will head back to products because we want to go and look at that product page um for the wordpress pennant and we'll just click view here let's see what we see has it changed hopefully it has there we go now we see brand nike right there and the rest of the page you still see here on the additional that the brand's nike has been added and you can buy now you can do all that fun stuff just gives you an idea of one of the uses for this now let's go ahead and add one more product to the nike brand so we'll just go products again and i just want to illustrate something to you so let's just say this long sleeve for example and we'll just repeat the steps we did a moment ago we'll go to attributes we'll select brands add it and then we will say nike save attribute update ding ding ding there you go and then we'll view the product okay so it worked for this one as well now what happens when we click on nike and as you can see it takes you to that archive page for all the products underneath nike now like i mentioned before you can go ahead and customize this entire area any way that you want for each brand or you can just make a generic one that will list the details to the particular brand that you clicked on super helpful and very nice to utilize so i mean that's basically adding brands but i want to show you a few more features i utilized the actual um filter system ajax filters on a page here that i want to show you so let me go to my pages here and click on the brand filters and keep click on view here now this is our ajac folders this is a custom loop that i bought and i'm going to show you another way or two that you can utilize the brands feature and that module to further deepen your customers experience on the page now we've got our ajax product filter here this already looks pretty cool you'll see our infinite ajax scrolling on here which is another great feature that we've added recently and then of course you know you can change the pricing and it'll update live in front of your eyes you can customize all the different settings for that stuff so let me just set reset everything here and then what i want to do i'm going to go ahead and edit two things the first thing i'm going to edit is the loop so this little piece of magic that's happening right here so i'll just open up one of these other windows i'll go to divi divi library and now i've got my brand's body commerce product card now that's the loop that i'm using there on that page so i'm going to edit that okay now once here and hopefully if he's not doing the reload we're gonna click add we're gonna do the same with that attribute module jump dump it in there now i'm not going to put a title this time but we want to select that same attribute product brands we can link it to the archive page here yes maybe no i don't think it's the best fit for this particular use so i'll just keep it as is and just make sure that we show the image and then here i want the image to be a little bit smaller because i don't want it to intrude on the rest of the page so let me just make that 25 pixels and then i'll just click yes and i'm going to have it show underneath the add to cart again so update and then we're going to see what happens to this page so let's come back here and let's refresh oops i forgot to take out the filter settings there try that again and there we go and now we've got these different brands showing up where they've been utilized now another thing that i'm going to want to show you and i noticed that i've maybe added two brands on some spots that happen sometimes because i do some testing ahead of time but it gives you the idea i want to change one thing with that layout though i do want to go ahead and remove the title from that one as well so we'll just remove the name yes yes product brands that looks all good let's go ahead and update that one more time and i'm going to show you another thing we're going to edit this page because we want to be able to select our filters easily there on the left hand column also so let's go ahead and do this when it loads okay cool so now with the filter posts ajax module we're going to open that up and we're going to add the filter field to include brands i'm going to click plus we'll not deal with that we'll select product attributes we'll select our brands nothing of that needs to be set um let me make sure that we've got it all layout options full width let's just go with those settings and see what happens update and when it loads we will go and check it out on the front end so we'll view page okay so i've got the drop down here so i didn't select the right thing yet so let's go and edit the page again but you can see the brands are already part of that which is nice and nifty edit module again new filter item i forgot to add brands as the filter name see you always learn brands show attribute swatches that's why i messed up so you just want to select that select that update and now we should be all set you can hear my laptop in the background again my macbook is working overtime okay let's see and coolness so now when i click on ikea we're gonna see that it's gonna pull all the nike products within that nike product category so easily displays right underneath there looks great and when you click on it you'll once again see it here right where we left it earlier underneath here and you'll see it right here in the additional information now that's pretty much it guys um i just wanted to mention that there is still a summer sale which at this point still have have about 11 days left you can get up to 25 off of any of our plugins or memberships and there's a free raffle for you to enter it's 2021 it's summer get into it get yourself rewarded and remember if there's any features i show you here today that you're not aware of or not familiar with you can either contact our support team if you have any questions contact our support team and if you need any help we're here to do so all right guys well that's it from me robbie with the divi engine team i hope to see you guys in the next video thank you so much

Channel: Divi Engine

Views: 367

Keywords: wordpress, divi engine, tutorial, how-to, woocommerce, brands, bodycommerce

Id: BQGt5dmF9cI

Length: 26min 39sec (1599 seconds)

Published: Tue Jul 20 2021