How to Build a Multi-Vendor Marketplace using the Photo Marketplace Layout Pack

hey divination welcome to a brand-new weekly live stream we'll be doing to provide some extra value in and around the divi design initiative and for those of you who don't know the first wave of this new initiative is to give away a new divvy free layout pack every single Monday and this is part of our larger mission which is to make you divination the most empowered community on the web so these layout packs are created by our super talented design team and they're published on our blog each Monday and now going over in detail by me or another member of the elegant themed staff every single Tuesday so in this Divi use case livestream today I'm gonna go ahead and show you how to build a multi-vendor marketplace using the photo marketplace layout pack and I'm gonna be using the WooCommerce plugin and also the extension of WooCommerce plug-in products of product vendors and I'm going to show you how to properly set up multi vendor functionality to your marketplace how to create a vendor registration page and more and we will also be using elements of our existing layout pack to build any new pages that we may need for our marketplace you can download this layout this photo marketplace layout for free using the link in the video description I have a link to the blog post where you can go ahead and download it and you can also find a link to our product page where you can find out more about Divi the Divi theme as well so I hope you enjoy all right so looks like we have our photo marketplace homepage here and when whenever we get started on a new layout it's always important to go through some necessary steps so it's a good idea to check out that article I have a link to in the video description it's actually the last link in the description and it's ten steps that you can use to whenever you're creating a new layout pack for your website or creating a website using this new layout pack you can use these ten steps and it kind of helps you you know structure some best case practices for doing so so I definitely encourage you to check that out we're gonna briefly fly through some of the setup process of a new layout pack but for the most part I want to jump in and tackle the multi-vendor marketplace setup so this is kind of what I have done so far and I have already imported my layouts so I'm gonna go to my dashboard here and I'm gonna go to my Divi library and while I'm doing that go ahead and say hello in the comments tell me where you're from and we'll have some people in from elegant themes staff there to answer any questions that you may have all right so here's my layouts that I have imported already and as you can see there here they are all seven of them there's seven pages including in this layout pack so once they are imported you're going to want to go ahead and go and add new pages for each one of those layout packs and I have extra pages here because I have the plug-in already installed but you can see I haven't about a categories a contact page a home page a landing page I have a pricing page a seller page and that's about it for our layouts and then I went ahead and created a menu so we've imported our layouts we've added a new page for each of our layouts and we've also created a menu so just go to appearance menus and your WordPress dashboard you can see I've created my menu all you would have to do is you know select all of your pages over here and move them to your new menu once that's created and after you create your menu you can go ahead and set it as a prime menu for your display location and click Save and that's that's kind of the basics other than that you would probably need to go ahead and go to your theme options I'm gonna go to my theme options real quick and it's always a good idea to go to your color Pickers default palette and you know grab some of these custom colors used for your marketplace here for example if I go to my home page I can see in the layout there's a lot of colors being used like this you know blue for the dividers here and the buttons and so an easy thing to do is you know go in there and grab open your module and grab that color and then go back to your default palette and enter it in there so you have it ready to go all right alright so if you're just joining us what we're doing right here is I'm gonna be using this is our divvy use case live screen livestream excuse me and today I'm going to be using the our new layout the photo marketplace layout packed to show you how to how you can build a multi-vendor marketplace for your own website I'm going to be using a commerce plug-in and an extension to that which is a vendor product vendors plug-in and you know if you want to access this layout pack you can do so in the description below there's a link to the blog post so you can go ahead and get it download it and if you're interested in Divi or need a the Divi theme or interested at all in becoming a member of elegant themes you can go ahead and find a link to our product page in the description as well and while I'm on this note I also have links to the the plugins that I'll be using for this use case livestream so it looks like Facebook took a little bit while well a little bit longer to go live so welcome to all of you who are just joining us so all right let's continue on don't forget let us know where you are and don't be shy ask some questions as we go along because I'm gonna I'm gonna be tackling a lot you probably have a lot of questions I can't guarantee I'll get to all of them but we sure will try all right so let's we right now we're just going over some kind of best case you know how to set up your layout for the first time type stuff some of you are already familiar with the process and right now we've just kind of gone over adding a default color palette which is also you know a good step to kind of get ahead of the game and in my theme customizer I'm just going to go over here and Oh didn't load didn't click the button so once I go to my theme customizer I'm going to go and grab this color blue here and I'm just going to inspect it and get the color that way but you can easily go in and use the visual builder and open up the module and get the color that way all right so once my let's see my customizer loads I'm gonna go to general settings and then I'm gonna go to my layout settings and then I'm gonna go to my accent color here and this is important to add especially when you're working with WooCommerce because WooCommerce is gonna pull from this default accent color to you know use the color throughout they're you know single product pages shop pages stuff like that so it's important to add your main secondary color or main color of your theme right there alright and I'm just gonna publish that alright so a lot of what's gonna happen is first is we're going to need to download our our plugins so going to go to the site for the plugin that we're using here and it's called I must have closed it out but it's called a product vendors so and this is what the the actual landing page our page where you can go to get the plugin this WooCommerce is free so that's going to be free for you this extension though is I think for yeah for a single site is $79 so you can get it from their website there's a link for this in the description below this of course is being used with our WooCommerce plugin and here's the WooCommerce plugin here you can find it in wordpress.org under the plugins or from your WordPress dashboard whenever you're looking to add a new plug-in many of us are already familiar with WooCommerce so WooCommerce and this plug-in product vendors are the main ones to use for this setup and if we do have time I do want to kind of introduce this you know it's a third-party plug-in but it's well documented or it's well supported and it's called WooCommerce products filter and just to give you an idea of what this does I'm just going to show you on my shop page here that I've already built we're going to get to in a little bit later but if you notice this sidebar here it has some filtering options for your marketplace here and this is a photo marketplace and got some mock content here with some mock categories and you can sort by you know these cool things like back like product categories and even the vendor whoever created or is selling this item so and it updates you know on this page use some Ajax and stuff so it's a pretty cool process to kind of filter out your products as you're going through all right so hopefully we have time to get to that it's again it's called woo sorry it's called WooCommerce products filter so make sure and grab a link grab that link in the description if you're interested in getting that alright so let's go ahead and once you have your plug in your product vendors plug-in installed I'm gonna go back to my WordPress dashboard here alright and once you have it installed you're going to see some new things being added to WooCommerce and one of those things would be when you hover over your products well actually let me back up a moment if you go to your plugins here I'm just going to my installed plugins you'll see it here will commerce product vendors alright and then it's going to add some you know since it's you know a WooCommerce official extension it's going to work really well with it so if you hover over WooCommerce once you have the WooCommerce plug-in installed and this product vendors should have mentioned that you must have WooCommerce installed already and the product vendors as well and then you hover over WooCommerce and then you'll see the Settings tab click on WooCommerce settings and under WooCommerce settings you'll see under the product tab you'll see this option here for vendors so if I click on that you can see some some of the set up the settings I can customize for my multi vendor set up like payout schedule how am I going to be paying commissions for my vendors right now it's set to manual but you can kind of schedule it out paypal mass payments environment that's just for testing I've got a sandbox account there but this one of the kind of negative things I guess you could say about this plug-in is that right now it's kind of limited to PayPal you can add you know other payment gateways like stripe but it's going to add you know more customizations not really set up for that so really PayPal is the best bet for this one and but it kind of utilizes this paypal mass payments thing to make it really convenient for you to pay out your vendors you or whatever the Commission's may be and so you just kind of go through here and set up your settings for that you can set a default Commission on a percentage base if I wanted to set it you know I don't know 20 percent or something like that and that would be the default for all of the vendors all right and so these are some display settings for whenever a user clicks on to see a certain vendor from their product you can customize what you want displayed on that vendor page just kind of show you what that looks like I'm gonna go to the alright let's go to my site here for a moment and let's go to my shop and you see how I have my shop and I already have products and we're gonna get to that but each each of your products has now a sold by with the vendor name there so if you can see that need to zoom in so sold by vendor three it's just mock content now but vendor one and on and on if I click on let's say I click on vendor 2 alright so you see this is kind of bare-bones but it has all the elements here you have the name of the vendor you have the logo just a mock logo put in there and waiting for the vendor some description of the vendor like a write up and then their products are listed underneath with the ability to sort those products so this would be kind of your vendor page and whatever you want displayed there going back to our settings can be customized here alright once you're done go ahead and save your changes and then let's go ahead and check out some other settings that kind of go into setting up your vendors if you hover over products and you go under there's another additional link that's been added since you uploaded that plug-in it's called vendors under products if I go there you can see kind of like a you know categories or posts or whatever you have now vendors where you can see and edit each one of them I have some mock vendors already here and this vendor this mock vendor actually was one that I used to join to become a vendor using the vendor registration form which I'm going to get to in a little bit but if I wanted to click in and edit one of these vendors I could do that and you can see all of these settings here it's similar to kind of a new user when you have a new user in WordPress with some additional elements like a logo a profile you'd want to enter an email for your vendor there because that's going to be the correspondence that you the shop owner is going to use to send them you know correspondence and notifications like when somebody makes a purchase of one of their products they'll get notified with that email they put in their vendor admins this is actually whenever you set a role and I'll show you that in a second but you can designate certain roles for vendors like you can set a vendor admin which is the kind of the go to the normal vendor role and you can also set a vendor manager and so you can you know set a vendor to be a manager of other vendor admins so it adds kind of a level of another role level to that vendor to whatever bender you add all right here's the the commission again for that vendor vendor you can override and set a specific one there's your Commission type again is set to pursue percentage you can set also an instant payout so whenever a you know a person buys one of their products it's going to automatically pay them their commission for that or whenever the payment process processes ok so and then the paypal email they will need for their PayPal account all right that's about it for that that's how you kind of go in and update your vendor but I'm going to go back this is how you add a new vendor you kind of go over here right here on the left side of your vendors page and you add a name I'll just go ahead and add vendor for add a slug I guess so in there for and don't just click add new vendor because you have these additional settings I missed that the first time don't don't forget to click on that one and then it pulls out all the settings that you would need and we've already gone through those already when we looked at how to edit it but you get the idea you would set up your profile your vendor email and so on all right now once you add a new vendor that's how you do it manually by the way we're going to get to how you can have a registration form so that you don't have to do it it'll just automatically happen which is pretty cool all right so once you add it I'm gonna go and back here and show you to edit the vendor and I think it's not there so let me let me go back here sorry alright so once a person registers to become a vendor I'm gonna get to that but I wanted to show you the different roles so you're gonna go to actually users that's where that's where I messed up so that was kind of confusing to me starting out so if you want to change the role for your vendor you actually have to change the user information so whenever they become a vendor they also become a user for your website so if you go to your all users here you'll see my new vendor that was registered through the forum right there alright and I know my role I promise you there's a place for you to change the role and I'm not seeing it right at this moment all right let me check my notes for a second all right I think we'll get to it a little bit later so I wanted to show you the different roles at this point but we're gonna have to skip it and come back sorry about that all right so we're gonna now work about two what we're about to do is I'm going to show you how to build we just I just showed you how to add a new vendor using the manual way but I'm also going to show you how to use a registration form to do the same thing alright so if you are just joining us welcome to our Divi use-case livestream where each week we take a free Divi layout pack and show you you know practical ways to use it on your own website and this week I'm using the photo marketplace layout pack and I'm just showing you how to add some multi-vendor functionality to that marketplace so I'm using the WooCommerce and WooCommerce extension product vendors and we're gonna we're basically setting it up for a multi vendor site so if you want the layout pack that I'm using it's there's a link for it in the description there's a link to the blog post we can go in and download and also if you're interested in getting Divi or more about becoming a member of elegant themes as a link for that as well alright let's keep going how are we doing on the comments oh my mouse isn't appearing hmm that's weird sorry about that all right so all right tech tech reality says bought the full membership and never regretted it for a second awesome somebody from the Netherlands all right welcome and Montreal Canada all right awesome guys I really appreciate y'all coming and checking us out and I hope you enjoy the rest of our livestream together let's keep going now we're going to create that registration page so to create the registration page there's actually a shortcode now whenever you whenever I see that there's a shortcode a shortcode being used to display certain things I kind of get excited because I know I can plug in that short code into a a Divi layout so just bear that in mind you know whenever a plug-in uses a shortcode or something to display the content you can that that shows you that or that tells you that you can use it within the Divi Builder so that's a good thing and I mean within limits obviously there's going to be certain limits to it but at least we'll be able to frame it with whatever design we want to frame it with and so I've went ahead and created one so if you I'm gonna go in and click on my vendor registration page that I created and so what you would do is just simply create a new page clicking 2fast sorry am I missing my link there so I'm gonna edit the vendor registration page that I created already but you'd have to go and and kind of create this page yourself and but I'm gonna walk you through exactly you know what I did so we can get a feel for it and so what I've the main thing you want to see I want to show you here is in the okay all right so if you notice there's a shortcode here this is the main shortcode that is used to display that registration form that we want what registration form you ask yeah the registration form for vendors so if a vendor comes to your site and wants to become a vendor they can use this form and what it'll do it'll set them up once they fill out that information it'll set them up on the backend of your WordPress website and then they can go ahead and then you sorry the owner the shop owner can go ahead and just kind of confirm that and then they'll be ready to go in and then once that's done they'll have the ability as a vendor to upload their own products to the site and and do all of that work and and you won't have to all you need to do is sit back and approve the things that they're putting in there so that's really cool one of the good things about this plugin is that kind of gives the power back into the vendors hand to create the content to produce all that stuff so let's check out what this registration form looks like and what I've done is I've just kind of used the I create created a new page so I'm going to show you what I did here and I'm gonna go ahead and give it a name it sorry it's a bit laggy sometimes my um when I'm using this kind of local install here it's getting laggy with all the things I have open so let's go ahead and create a registration page and let me go back almost forgot I need to grab that short code right there I'll copy it to my clipboard and I'm gonna go back here and I'm gonna use the visual builder here for a moment and then once that loads I'm going to give a pull from one of my already included layouts from my layout pack I'm actually going to use the categories layout pack so once the visual builder loads I'm come down to my menu here click Add from library and I'm gonna add the categories layout alright and yep I got hung up there we go alright so the I'm gonna use the categories one so once that loads finally I'm going to you know customize it few things to do to customize this layout for a new page just simply going to go to my settings for my section here I'm gonna go to the design tab I'm gonna go to sizing sorry layout here I'm sorry I headed the wrong one this is a full width header so I need to edit the module apologize go to my full width header module here then I go to my design tab then I go to my layout and then you see how it says make fullscreen well I don't want it to go fullscreen for this page so I'm going to simply click that and then we're done and then I'm just gonna you know like edit my text here to say you know registration or vendor registration and I can go ahead and update this title here you know to say complete this form to become a member or something like that alright I don't need this this row here I'm going to delete that one and that one and I'm gonna add a new row one column row and then I'm gonna add a text module and again what I'm doing here is I'm showing you how you can simply create a new page using the elements of your existing layout to place a shortcode to display content from a third-party plugin so in this case I'm simply going to paste in that shortcode there and click Save all right and I don't need this stuff down here so I'm simply going to delete it alright and so it's not showing the form right now because I'm already logged in so I'm gonna have to log out to do that and then you can customize the footer so that's basically what I've done let me go ahead and show you the register vendor registration form that I already created so now that you know that ones I just wanted to walk you through that process really quickly so this is the one I've already created here and then let's go ahead and check out what that looks like in an incognito browser so let me just take a moment and switch browsers here all right okay so let me go ahead and transition that one for you wrong one sorry okay there we go not the right one okay I don't know how that was broken for a while but now you can see what the actual form looks like once you you put the embed code or sorry the shortcode in there so there's a vendor registration enter your name login email and then the vendor name the vendor name would be what is displayed on their products whenever they're selling it alright and something about the company and then click on register and after they registered they're gonna get this success message your request has been submitted you will be contacted shortly alright so and then they'll get you know and with the with the what we would do or I'm sorry what the shop owner would do is then go back and make that vendor change that vendors role to a vendor admin alright so they've logged in successfully they've joined as a vendor and I'm just gonna while I'm here in this Inc incognito browser I just want to show you what it looks like from a vendor's perspective on the backend of the or when they are logged into your site so it's you know they have access to you know their dashboard here which you know looks like this has a summary of the sales that they have in products and all that they also have a the ability to generate reports or looking at reports things like that so it has some really neat stuff as ability to go to your products and then start adding new products which is great also they have some store settings that they can customize by including their logo like we went through whenever we added one manually well they can do all that here when they register so it's definitely probably preferred to go ahead and have this registration form set up so that they can do it themselves all right so that's kind of an idea the power that the the vendor can have when they log in and start using your site to sell their products all right so I'm going to transition back here there we go to our site and I'm gonna alright so now that they've registered you're going to want to go ahead and switch that role for them and I might have to actually come to think about it come to think of it I might actually have to register someone else in order to see that role come up but what you would do essentially is go and to the backend of your dashboard here go to that user again that's right that was the wrong the wrong one here go edit the user and I was clicking on the wrong one I apologize so here it is so this is the one this is an example of a vendor that joined through the registration form that we just walked through and what you do as a shop owner is you come in here and the only thing you need to do is go find this role here write their role and where it says vendor admin you're simply going it's gonna say this initially it's gonna say pending vendor and you're gonna go in and just change it to vendor admin and you can also see the vendor manager option there that I mentioned and the vendor manager then has the opportunity to manage other admins so there you go changes have been there admin in most cases that's all you need to do and then they're going to once you update that they're gonna get an email notifying them they're gonna have the password setup and all that all right so there you go that's how you go through the process of setting up a vendor and a vendor joining themselves using the registration form alright so let's go on if you're just joining us this is our Divi use-case livestream and today I'm going through how to add a multi-vendor marketplace to your new photo marketplace layout pack if you need the layout packets in the description below there's a link to the blog post to download it go ahead and get it also if you are interested in Dibby or becoming a member of elegant themes as a link to there as well along with all the three links to the plugins that i'm using for this use case so going on here let's briefly go over the products so I already mentioned that a vendor can add their own products which is great and so when they do that they're all they're already going to be a sign that are sorry that their vendor user name is already going to be assigned to their products so let's for a moment if I my shop page and then all right so if I go to my shop page here you'll see remember it's sold by vendor and whatever the name is that's gonna automatically be applied whenever they're doing it themselves with their account so we don't have to do it but let me just go ahead and show you whenever you go to add a new if I go to divvy I'm sorry products and then to go to all I'm gonna go to all products just to show you some of the products and already have added as mock content but you would go in and add a new product I'm just going to go to this one here this would be essentially like your photos right the photos that you would be offering and so the goal here when we add a new photo as a product or whatever your product may be is to kind of get it set up correctly so that the the user experience when they go to checkout is what they want and in this case we want a downloadable product because we want them to be able to download their image once they buy it so you put your product name you give a description there and then you add your category that you have set up you can add new ones as well this one be like backgrounds and then here probably can't see it very well but now you can here you see the option to add a vendor to this product so you can do this manually by setting up your own products of course set up your product image as well in addition to that you also have these options here so you can see it a little better notice under my general tab I have made it a simple product but make sure right here you click downloadable you want a downloadable product when you click downloadable product or when you click that check box this will pop up where you can add your downloadable files in this case it would be you know the high resolution image or something that for them to download you can set a limit and an expiration date on that as well on that download and so after you've done all that you've you've got a an image ready to be sold as a product all right I know this is a lot so ask questions hopefully we get to him in time but this is uh looks like everybody just checking all my comments here all right you're welcome to Christopher he says could you show how the platform owner can get a commission for every transaction all right so I think I went over where you can go for Commission's but actually maybe I didn't let's go briefly I think that's pretty close to next on my list but let's just jump there real quickly whenever you want to customize your commissions you can do so here there's a spot in the WordPress dashboard to do so this is where you do all your payouts and stuff so thanks for this question I want to get to it I wanted to get to this anyway so if you look at vendor Commission's I I didn't really set a commission on these vendors but you would if you did you would see the total here for each one of these products so what you're seeing here are purchases so these are mock purchases that have been made on this product and and then what you see then here is for each purpose for each purchase you see how much Commission there is to pay and what you what you need to do then is with this PayPal functionality built in you can do these really cool bulk actions like pay out pay out all the Commission's at once which is really a great option there and then there's other ones as well but this is initially where you handle all that stuff and manage the commission payouts and all that alright good question let's go on you can after you add new products you would want to you know go to your you know set up your once you have your products excuse me set up then you use your you look excuse me your WooCommerce plug-in will automatically have set up for you these extra pages that it's needed to kind of conduct the business that's needed for a ecommerce site so let's go back to our back-end just to show you those pages for a moment if I go to all pages here these are considered your WooCommerce pages and those are the cart page the checkout page the the my account page and the shop page so the shop page is let's go ahead and view that unfortunately I know this is kind of a pain especially when we love Divi so much and we want to use these layouts that WooCommerce is kind of limited in what you can do to the design of the shop page you know with the Divi Builder it's not really easily done so what you would need to do is add custom CSS to this to make it more customizable but so this is the the shop page here and as you add products or as a vendor ed adds products you'll see them pop up here and then this step here this last step which I'm going to go over in a moment but before I do that let me just remind you that if I go to my account and these are again the WooCommerce pages so there's a my account page there's the you see how it's kind of bare-bones but because this page unlike the shop page like the shop page and the category pages within their WooCommerce aren't customizable because they don't use that shortcode that we talked about earlier but this my account page does so if I were to if I wanted to I could go in there and grab the shortcode that's being used for this to generate this my account page and then create my layout that I want paste it in there and you know build a custom looking my account page you know with limitations obviously because you're gonna need to you can change the text sizes and the colors of this stuff using the modules right the text module if you put the short code in a text module you can do that so I wanted to mention that because I know they're you know I last use case livestream I did on the fashion layout we had some questions about that and how limiting it was to use WooCommerce in the styling and all that but there are ways to customize these WooCommerce pages to some extent so make sure and take advantage of that alright so lastly we may have a little time here a few things I want to mention is we can if I go to my shop page and if you noticed if I click on a product we haven't done this yet all right now ideally I would have a separate sidebar here for this or make it full width so I wouldn't have this searchable thing that I've created from just my shop page but you'll see that there's a category here of food and this is considered if I click on that a category page designated by WooCommerce and but what you could do if you wanted to is grab this link up here sorry this whoo this product category for slash food whatever it is that this category is grab that link and then you can go back to your sorry once you have that linking go to your categories page in that layout that's built into our photo marketplace layout I'll just show it to you so remember go grab the link to this specific category and you can use that custom link and then add it to your categories page that you have here so if you can list all your categories you can create like a custom page here and then you can make this blurb here that link sorry and then once you click on it it'll take you to that specific category page that's built into WooCommerce so that's just another option if you want to add certain customizations and now for the last plug-in here we got a few minutes I'm just going to show you once you download the WooCommerce plug-in called a WooCommerce products filter plug-in you're going to see some settings for it and I'm gonna find it oh so you go under WooCommerce and you go under settings and this is really cool because it adds it to WooCommerce over here as a tab so you now you have a products filter tab and then you go in there and it's kind of got a really you know a fairly nice UI and the ability to customize your different fields for yours your basically your filter your search filter on your sidebar or in your widget so you can see I added a search by text widget and go back to my shop page but I added a search by text I search by price and this gives them that got a range slider there and some other ones like a checkbox for product categories and these are the ways I can customize the search and then and there you can see them they're off to the right and it will integrate with the shop page so that it communicates and updates it in real time as you click on these filters which is really cool to add this once you customize this there's a you would simply go to your go to appearance go to widgets go to your you know where you add your default sidebars and stuff like that and what you need to do is find this widget here called Wolfe WooCommerce products filter okay so then drag that in here to your sidebar and then you can see everything that you've added to your sorry in the settings of your search filter will pop up using that widget alright I think we're out of time any questions maybe I can get to real quickly before we end hello Mohammed I'm doing fine how are you alright let's see cool I think we're pretty good on questions all right all right so Richard says here yeah so the description of the vendor role seems incorrect specifying a vendor admin simply means to add an additional user that can manage the vendor specific back in settings that is 100% correct so if I misspoke earlier that is I am I apologize and then the vendor manager would then be able to have a higher role there to manage those vendor admins so good thanks for clarifying all right I think we're about done all right well thanks guys that's it that's all I have for you this week thanks for tuning in if if I haven't answered all your questions I apologize but make sure and get them in there if you can while we have our team in there also be sure to like Facebook page and subscribe to our blog newsletter and our youtube channel because we get these free layout packs every Monday you want to get notified of that and so no matter where you get your information or updates from if you if you've subscribed you're going to get a notification of any new content that we have so make sure and do that also don't forget Demi nation coming up on Thursday and thanks again and we'll see you guys soon

Channel: Elegant Themes

Views: 5,784

Keywords:

Id: 4YeSjzDPgTM

Length: 56min 12sec (3372 seconds)

Published: Tue Dec 12 2017