How to Add Custom Fields to WooCommerce Checkout Page | No Plugins

hey what's going on guys in this video we will work with wordpress and woocommerce and to be more specific we will learn how to add custom field to the checkout page uh we're not going to use any plugins just going to do that from just writing php functions and using wordpress hooks like add filters add actions and of course woocommerce hooks um you might ask why why don't use a plugin which does you know it's easy just to install it and just add fields and and just use it but sometimes like whenever the store gets big and you use um these kind of plugins for simple functionalities like this ones uh your website may slow down and um and whenever you add a new plugin that's most of the time that's like that's that's a new table at least a new table in the database uh extra table and that's extra time to process it it's the time for your server to process it and you need extra resources and stuff like that so um i don't know if there's a way to make it in the easier i mean this may be easier if you have already php knowledge and stuff like that but to me this is easier it's easier to do these kinds of kind of functionalities from your php uh from your functions.php file and you don't have to deal with other plugins and stuff like that because for example let's say you use a plugin to insert this data and that plug-in has a separate table in the database and for some reason the guys who are maintaining the plugin they decided that they don't want to maintain the plugin anymore and after you use that to kind of like you use it for like thousands of orders uh you have that data structure in the database and your plugin is not updated then you you run into issues and you have to migrate all the data from from that plugin to another one and stuff like that but when you do it from you do it by yourself from your functions.php file from your end just using wordpress hooks um i don't think you can you get in this kind of troubles that easy so that being said let's go ahead and get started i'm using the 2020 wordpress team which comes with wordpress i created a child team for this team so if you go to wordpress content themes and then in the themes i created a another folder for my child team which is 2020 hyphen child you don't have to match these names don't have to match with your parent team and then in this child folder team i created two files first one is the style css this code this is the most important file because it has this comment and wordpress reads this comment so you have to have a team name which should be unique uh theme uri description author author uri template is also very important because this is default this is the parent folder so in my case the parent folder is 2020 so i have a 2020 here version is also important you can have it and then from the license to the text domain you don't have to have this stuff but then if you want to use the same style from your parent team you can just import your css style in this way and then just overwrite some of the stuff below here or just add new classes and stuff like that so this is the first style uh file and then the second one is the functions.php you need this file on to uh just use wordpress and woocommerce hooks and create functionalities similar to the one we're gonna create today so to get started i want to mention that i'm going to write everything from scratch so you can follow along with me but if not there's going to be a link in the description from america from where you can grab the source code um are going to be three steps first step is going to be to output the field it's going to be above your order uh section going to be a separate section and then it's going to be just one field text type field and then on the second step we will save the data from that field we'll store it in the database and then after that we will output data on the dashboard because on the wordpress dashboard under the weather set order sections and then after that we will include that data in the woocommerce email templates so because whenever there is a new new order for example somebody's placed a new order the store admin and the buyer they get an email with the worder summary kind of like they have details about the products and stuff like that so okay let's go ahead and get started i have my functions.php file here and i'm gonna i'm gonna create the first function so this is kind of it's gonna be a filter i will have we'll have to use add filter to add this function as a filter to the woocommerce checkout field so let's go ahead and start with function oops on oh my god first of all we should open the php tags victor what's wrong with you victor and then we have function again function and the function name i'm going to use at the beginning of each function i am going to use vi code or by code media just so it makes sure that there isn't there isn't any other plugin or team that's using the same function name and we don't get any errors on the website or anything like that so i'm going to use vi code underscore custom underscore check out underscore fields and here's going to be a parameter which is fields like this and i'm going to open curly brackets and here we're going to have a kind of a an object if we can say like that an array same array so we'll have fields which is going to have the fields so we have fields and the key is going to be vi code media by code media underscore extra underscore fields like this and then here we assign to this uh key an array so we have an array and in this array we have the field so um here's going to be the first the first field and we start by typing in we start with field name so we have i'm gonna have i could media underscore ad just from additional you just add field and here is gonna be another array and in this array we're going to have the parameters for this field so we'll have type type is going to be text and required we want to make it required so we'll have required and it's going to be a true and the label of course the label here will have underscore underscore parentheses and then here we have additional field i'm going to name it just additional field yeah like this let me just clean it up a little bit so can it's gonna look looks prettier like that okay now we have this function ready we should we should actually return this stuff so we have return fields so what did i do here i have a fields variable which is kind of like an object or an array um and we have just one key which is like media extra fields and we assign here the fields if if you want to have an additional field you can copy this stuff from here and paste it below but don't forget about comma like this oh and you can have an extra field here with different name of course so we assign all these fields to to this variable and then after that we just return after we return it i mean we return it and we want to add it as a filter so we return it to woocommerce checkout fields filter so we have add filter and here we have the first parameter is going to be woocommerce underscore check out underscore fields right and the second parameter is the function um which handles the functionality we want to add to the filter so in our case is like uh by code custom checkout fields and we close it like this and then below we will have another function we'll add kind of like an action and we will output this field because just right now we just assign the parameters for this field onto the woocommerce checkout fields filter so here we'll have now function function and we have here vicod media underscore extra underscore check out underscore fields and here we have curly brackets and we have actually now we're trying to get the data from our from the woocommerce checkout fields filter so we get the data from woocommerce and we assign it to a new variable which is going to be check out so here we have the checkout variable and we assign the data from the actual from the woocommerce object and we get the data actually from the checkout function like this okay now here i'm gonna close the php tag because i want to add a do a div class because i'm trying to style it a little bit so if i'm going back to my page and if i inspect this page now i can see that all this column all this each section is placed in a div class call to hyphen set so i want to use this class i want to i want to add a class like this for my field which is going to be like a separate section for it so this is gonna this is the place where i'm adding that so div class and i say they're called to hyphen set jesus christ okay leave like this all right so now here i want to have a kind of a like title so i'm gonna use h3 tag and here i'm gonna have php okay so here i'm gonna have hp i'll use the e function from wordpress and i'm gonna say additional fields like this and then below in the same div actually and here below i'm gonna have a four each for each i'm gonna look through all these data from woocommerce and get from woocommerce and i'm getting i'm going to get um peeled by field but mike is just one but like just to let him know what's going on here we're going to take field by field and we will output them to the screen so we have four each and we get a checkout and we check out fields check out fields um and then from here we get actually forgot i forgot to open the php tag like this okay fields we'll get checkout fields check out check out fields and here we should have bike media extra fields um we should get this one from here the key we want to get the field fields from from this kind of key uh okay and we get this one oops as we have key field all right and i'm gonna leave it in this way like this and then here below in the for each we want to output the field of course so we have php uh php and we use uh to output the data we use the woocommerce form field form field and this one gets three parameters the first one is the key the second one is the field and the third one is the get volley get the fuel box so we have checkout get volley and then we have key as a prompter okay we have this in place and now we should stop the forage kind of like just to end it so we have and for each like this we've got the div here it's closing okay let me see what else we're missing here yeah we're missing here the php tag like this and then below we want to add the action so we have add action and now we want to add this function kind of this whole whole functionality to the woocommerce checkout after customer details so here we go we have woocommerce checkout after customer details and the second parameter of course is the function name okay so if i save it now and if i go on this page and if i refresh the page it's supposed to work but it's gonna work only in case if i didn't do any make any errors so we see the additional fields section we get the additional field and here's the field and it's required because we have this asterisk now if i inspect it i want to see what's the field with parameters so we have type text class input text name by code media add additional field is the same thing as we put it here see this is the field name id the same thing we don't have a place folder and we don't have a value for it here okay but that's that's good it works till till this step we're doing great now this the next step because uh next step would be to store this data in the database because if i click on the place order it's not gonna save it in the database like all these data from this field it's just gonna disappear somewhere i don't know okay to do that um so let's put here a comment first it's gonna be step one uh output the field to on the page i'll put the field on page and then we have step two step to save data to the database okay and then here we will have a function and of course we will add an action so we have function and function by code media vicod media underscore save underscore extra underscore check out underscore fields whoa kind of long but really clear save extra checkout fields and then here we should have two parameters the first one is going to be order id and post it we get posted because we need to get the data from the field actually and here's here's why because we have to check if there's any is if the user inserted the word typed in anything in that field uh and only in that case we want to save what's in that if it's empty we don't need the data from there so here we have a new statement which checks if is set if is set posted and here we have vicod media add additional field this name from here so if check if there's any data in the field then we want to update the post meta so we get use update post meta and we update kind of the the current uh water current current order so we have we have to get here the order id worder id uh we'll get the field name and then also the field value so kind of we update so whenever somebody clicks on this uh this is how it works if a user clicks on place worder the word or first first of all the word is gonna store in the database without the data without the data from this field and then after that um [Music] and then after that we check but that's good this is this happens like really really fast and after that we check if there's any data in this field then we just get the the updated post that we just get the weather the latest order and we update it with this information this is kind of like that's how kind of the logic logic behind it okay next we have underscore it's very important to use underscore and then we have y code media add field over here like this this is the field name and then next is the posted posted and we have again vicod media add field so we get the data but but here we should use the sanitize text field function so we just kind of filter the data make sure it's it's safe data in this field so we have sanitize underscore text underscore field like this and here i'm gonna close it like this and like this so apparently this is the way it's supposed to look it's just look over it one more time get function it is set posted uh why could media add field update post meta order id wifi media field send it eyes text field yeah it looks good here next what we want to do is we want to add this action so we want to add this action to the woocommerce checkout update werder meta which is also long but it's that's fine so we have wool commerce underscore check underscore update wait this is not check it's check out checkout update order underscore meta and the second parameter is actually this is going to take no four parameters second parameter is functions it's the functions name like this now the next parameter is the priority which is 10 it's 10 by default but there's a priority stand and also the argument because we have kind of like two arguments here we want to let this action know that we want to use two arguments for this function so we have t here if this is unclear uh unclear to you guys you can search more about this stuff on google so if you open google search and search for ad action wordpress on the developer that google developer that wordpress.org they have a bunch of stuff very cool stuff you can read a lot of stuff about on their hooks and stuff like that so the ad action um it gets uh two two required parameters this this is what i was using all the time so the first one is the tag the name of the action and then we get the function to add which is also required now the third one is the priority if you don't mention this one um by default it's 10 so i had to use also 10 because i wanted to change the accepted arguments so i had to have this one in place and then uh to put this on the fourth one which is accepted arguments and by default it's one because it but for me is uh i want it to be g two so that's why i had to put everything here okay i hope this cleared things up i'm gonna close that let's go back here let's make sure we have everything in place yeah everything looks looks good now let's save this file let's go back i'm gonna refresh the page just to make sure we don't have any errors and now i'm gonna submit the form i'm gonna submit the form but we won't be able to see this data anywhere it is going to be in the database we will see it only um whenever we get to the next step where we'll output the data on the dashboard first so here let's say tom uh thomas miller united states street address i don't know 1 54 j's street city chicago illinois illinois zip code 60 614 phone number i don't know how long can it be you know that's too long email address thomas gmail.com okay there's additional information we don't have to fill this in uh additional field actually here let me just click on place order just to see make sure that this validation works so it's asking us to fill in this field so additional field let's say just testing [Music] the field click place order it's kind of slow because of my computer but because i'm working on a local host okay so here we go thank you your word has been received but we don't see the field okay if i'm going to localhost wordpress admin and if i'm trying to log in here i hope i didn't forget the password because that would be terrible okay so it's good now if i'm going to worders uh the next step would be to output this field here on the words whenever i click on the thomas miller and i want to see more details about this order this is where we were going to output the data now so this data should be somewhere here okay let's get to the next step now which is going to be the step number three step three it's going to be display data t see i was thinking maybe let's let's do first display data dashboard yeah let's do it let's do it display data on the dashboard first and then we can do the the thank you page and the what's that this on the order data on display page which is thank you and then the view order okay so we have the step three display data display data on dashboard here we'll have function and this function is going to be by code media underscore display order data in admin sorry for such long names guys order and here we will have this function but we should add some uh html uh kinda we should add some html tags because we have those divs from the wordpress dashboard so we have to use this classes from here so to do that i'm gonna close the php tag from here and i'm gonna open it later on over here and here i'm gonna have a div class div class word data column okay and then here here i'm gonna have h4 h4 you're gonna have kind of like like a title and this is gonna be i'm gonna use php here because i will have to sanitize the stuff so here's going to be underscore e we have the parentheses and here we have additional information information and the second parameter is going to be woocommerce this is kind of uh you can use this one either way because we used it you can use it like this you can put it like this this is just saying that that's this stuff is related to wordpress okay so we have woocommerce here we close the h4 um we should add like a another like a link to edit the data so we will have because if you look right now on the wordpress dashboard there is this icon here so if you click edit you can edit the stuff right so this is what we want to do here now um so we will have a h r e f g okay so we'll have what okay this we won't have any url in this one because it's going to be um happening on the ui but here we will have a class it's going to be edit underscore address is going to be similar to the address and then here we will have another me php like this it's gonna be php i'm gonna use the same e function to filter the data so this is gonna say edit and the second parameter is going to be woocommerce and then we just want to close the a tag like this a tag is closed now below okay below here we want to add another div class this div class it's going to be address okay the class address and we're going to use php here so we'll have php um cphp i'm gonna close it here and we have echo and here we have oops we have a paragraph p tag and then here we will have strong and then this is going to say we will use concatenation here and we will have underscore underscore parentheses and this is going to say additional field like this additional field we have dot okay like this and next here going to be like this okay we have this dot here we have t because we continue the concatenation and then we have get underscore post underscore meta we have the parentheses here and we have the order id so kind of we get the data from that field so we have the order id and then we have here again underscore uh vi code media ad field so we have vicod media ad field the way we have it here like this underscore viper media underscore add on the score field and and then and then we have two like this last parameter and then don't forget to add like this concatenation we've got this one in place like this okay so that's how the line should look like and then below this function let's see below this div class we will have another div which is going to be uh the value so we will output here where um outputting kind of the the field and then below we're outputting the value of the field the text input this is kind of like the label okay so we have div class div class um edit address i'm gonna put edit address the way they have it here because whenever you click on this one all right guys so this is how it is here we have the data we get the we kind of output the field so the additional field label here and then we have the data from the field we get it from the database now and then below here we'll have another div class for whenever we click whenever we will want to edit the data then the data from this field from the dashboard um then we need to have so i'm using the same class from the clock from the object so i have edit edit address like this and then here i'm using php so here's going to be uh woocommerce wordpress text input so woocommerce uh wordpress wp underscore text underscore input array and then here we have the id and the input field id it's the y code media field uh the the name we've got here like this underscore vi code media underscore add field and uh next one is going to be the label so this is going to be kind of the edit page so you will see in a second whenever we're done here you will see what i mean okay so if i could be in the add field uh we get the label now and this label is going to be underscore underscore we have to filter it it's going to say additional field additional field and then here we will have another parameter which is going to be now wrapper class wrapper class and this wrapper class is going to be underscore billing company um billing company field yeah let's do that building billing company field like this so just make sure you close this line here because like this is this is what after i click on edit this is where we were working here all right let's go back now what we should do is so this looks kind of done we just have to add the function we just have to add the action now so we have add action whoa so we have add action and and the action we want to add this uh this to is um it's going to be woocommerce admin order data after word details so we have woocommerce underscore admin underscore order underscore data underscore after underscore order underscore details this is a long one but that's the way it is you can't do really much about it and then here is the function name so we'll place it here like this we save it and now below here we should add another function which is going to save the data from from here because if we if we clicked on this icon as we did here and we update data from there and we click update we should make sure that we save the new data so to do that we should add another function here very small function guys i know there's a lot of code here and it's hard to understand what's going on right now but um you you will like i think you will understand whenever we're done this with this function so have function and if i could media underscore save extra details and here we get the post id and also the post and here we have a function update post meta and here we have the post id and we have the our field name which is why code media ad field like this and then we also have another parameter which is the wordpress this is w underscore clean which is cleaning up the data from our kind of it filters it from our post meta method so we have post like this and here we have the field name so we have like media ad field like this and yeah just make sure you close it properly to close the line properly and then and then here we just say save data from admin and we add a new action and this action is going to be hooked to commerce process show order shop ordered uh order meta and we have woocommerce underscore process underscore shop underscore order underscore meta and the second parameter is the function and we also have um the priority is going to be 45 and the arguments are two because this function just two parameters here so close it like this let's save it let's go back and let's see what's going on here hopefully we don't have any errors um the link so we have additional fields additional information additional field but for some reason the data is not showing up here so probably let me just check it one more time here i'm gonna go up here and i have so we have the address get input additional field this yes this works get post meta our weather order id you probably guys already saw it that i missed paulie and it shouldn't be in this way get post um get post meta let us stop here let's try a different way let's do it like this hope worder get a worder and then the idea like this so let's save it and i'm gonna go back and refresh now yeah so that was the mistake so it will it works now we see the data from that field test in the field now if i click on edit um i can edit the field from here i mean it shows it like like this i guess because um [Music] because my screen is so small and because you see this this stuff is also small from here so that's what i'm thinking but let's put something new data here new data click update and i have an error functions 56 56 so something is wrong here i misspelled something here i guess g so here we have the update host meta so we have post post id and white code media field wordpress clean we get the post and it's saying there's been a critical error guys this should be woocommerce woocommerce clean sorry about that guys let's go back i'm gonna go back now i'll try to update this one more time okay so i'll click edit i'll paste here new data update and it works and it updated here so everything works fine until now now what we should do is we should add this data to the thank you pages already said so let's do that above let's leave this one to be like the fourth step so i'm gonna make it like four because we should we shouldn't do this first uh before this because i think it's the front end is more important than just jumping to the back end but let's add now this to the thank you page so to do that um let's do like step three um display data g user thank you to user to order page or something like that so here we have function by code media underscore display underscore order order underscore data so we have order id as a parameter and then here we have i'm closing the h the php tag and i'm going to open it here like this but here in the function we will have an h2 h2 title and this is going to be i'm going to have php here and this is going to be underscore e and this is going to say extra information extra information [Music] and then below it's going to be a table so we have table class and let's put a class shop table and then another class is going to be shop table responsive responsive and and additional info so this kind of makes the the table responsive okay and then we close the table right here and then we have at the tea body t body and then here we have t r t r and then we have a t h t gonna have two of those and then here the first ones we use php because it's getting a dynamic value so we have e um [Music] and we get additional field this is label additional field and the second one is getting the value so we use also php and we use here echo get post meta so we get post meta and here we have order id and then we have the vicod media ad field which is the like this uh why could media add field this is the field's name and then after that we have another uh third parameter which is saying true okay so this function is done now what we have to do here is we have to add this function we have to add two actions so we have add action and the first action is going to be to the thank you page so here we have woocommerce underscore thank you like this and then we have so here we put function name the priority is going to be 20 and another action is going to be for the view underscore order and the priority is going to be 20 as well so if i save it now and if i'm going back to the checkout page and if i refresh you know if i refresh this word or receive page kind of like thank you page we can see the extra information this uh section is appearing here additional field and we get the new data because it's new data because we just updated it from the dashboard but whenever there is going to be a new order and this field is going to show up here okay so this is fine now the last step was to add this data to a to the email templates whenever somebody receives an email so we have step five uh add the field i'll add the data to the email template so here we have to create a function and we have like media underscore email underscore order underscore meta underscore fields and here we have fields uh first parameter and then send sent to admin parameter and then we have order and here we have the fields so we have a new variable fields and um this is let's let we can make this one in interesting uh let's let's say uh additional field okay fields and here we have [Music] um gonna put here this like this and here we will have an array and this array is going to get the label label underscore underscore and here we have oops additional additional field and then we have the value and the values get post meta and we have the worder id first parameter the second parameter is the field name as we have it here so i'm going to copy and paste it here if i could media add field and the last parameter is true like this and this is fine okay so just make sure you close this line properly here and then after that we just return return fields and we have an add filter so add filter and here we have we add this filter to woocommerce email order meta fields so we have woocommerce email order met ups meta fields and of course we want to add this function to that to that filter okay i'm gonna save it um this is not i mean like i don't have a way on testing this email because i'm on localhost and i don't have that smtp here i can't send emails from my local machine but it's a view card but if you work on a live server you can test that email and just customize it the way you want so it looks like everything works fine until now guys um if you like the video give it a thumbs up subscribe for my channel uh if you have any questions leave them in the comments or any suggestions or any feedback you're more than welcome uh thank you for your attention and i'll see you the next tutorials

Channel: Vicode Media

Views: 9,831

Keywords: how to customize woocommerce checkout page fields, how to customize woocommerce checkout page, WooCommerce Checkout Field Editor, woocommerce checkout page customization, customize woocommerce checkout page without Woo Checkout Field editor pro, woocommerce checkout page, woocommerce checkout page fields, woocommerce checkout page edit, woocommerce checkout field editor plugin, customize woocommerce checkout page plugin, wpcrafter

Id: TBEc2PRf1D0

Length: 54min 23sec (3263 seconds)

Published: Sat Aug 22 2020