 Today we're going to be talking about WooCommerce and specifically customizing WooCommerce. For anyone who's in the last talk, that was mostly about fixing WooCommerce. This is going to be more about breaking WooCommerce. So let's see what we can do with this. So a little bit about myself, I'm Gary Thayer. I'm a WordPress developer based out of Portland, Maine. I'm also an organizer for WordCamp Portland, Maine and our local meetups, Google Analytics certified. And I work for a company called Hall Internet Marketing, which is based out of Portland. And we do enterprise level e-commerce websites, as well as other full service internet marketing stuff, PPC, SEO. And I'm also working on building a order management system for WooCommerce called Crosspeak. So if that's something anyone's interested in learning more about, let me know. And our agency is a WooCommerce Gold Expert Agency. But in a slightly change of events, I'm starting with 10 up in a couple of weeks. So if anyone has questions about them, I will try to answer that as well. So let's just get started. E-commerce can be hard. It's definitely, installing WooCommerce can be very easy. But actually running a business as any business owner knows can be very, very challenging, whether it's going to be a brick-and-mortar business or it's going to be a shop online. Many of the things you need to think about include products for your website. How are you presenting your products? What are the images you're going to use? Do you have to get those photographs taken? Do you have subscriptions? Are you writing your own? Are they supplied by some sort of distributor? How are you going to handle pricing and sales? Do you need to worry about inventory management? What about the shipping sizes of the product compared to the actual physical dimensions of the product? How are all of these things going to be categorized and organized? And then with the checkout processes, you have your payment processors, your coupons, your order management, any third-party integrations that you might have. And then when you start looking at fulfillment needs where you have shipping costs, how are you going to get things to your customers on time in a safe manner so that there aren't returns. And then, of course, there's the actual customers, the most important. How do you manage your relationship with all of them? And that's, from a developer's perspective, the easy stuff. This is the things that comes prepackaged in WooCommerce automatically. So a lot of the stuff that you might need for your business, WooCommerce is going to have, but I've never met two businesses that operate identically. There's always some product that needs to be shipped in a different way, or it needs to be delivered only on Thursdays under a new moon, or something ridiculous like this. So that's the realm we're going to look at here today. We're not going to talk too much. We're going to look at a little code, but it's not going to be too cody. But hopefully what we'll look at is some of the best practices to go about modifying your WooCommerce site and some of the snakes I've made with this, and we'll go from there. I should have said this earlier. If you have any questions, just raise your hand or start yelling at me. We can do Q&A at the end, but I'd rather have just a conversation. So this is an example from a customer. My store sells perishable products which need to be shipped and delivered on a specific date. So in this case, it's a flower delivery company. So by the nature of their business, their products go bad. You can't return a product to them because it will be dead by the time it gets there. They can't resell it. Furthermore, it needs to be delivered on a specific date, birthdays, anniversaries, holidays, and you need to allow customers to choose a delivery date, which not only means that somebody in January should be able to order for Mother's Day, but it also means that you need to determine where am I shipping my product from and where am I shipping my product to, how long is that going to take, and then how can I fulfill it to have it arrive not too early and not too late? If you're too early for a birthday surprise, you've ruined the surprise. And if you're too late, you've lost a friend. So that's some of the challenges that a business might have. This is another one. I want to sell products to some of my customers, but not all of them. Kind of a strange request at first. But in this case, they have wholesale products. So they might be selling, in this specific client, they sell like an energy bar. So you could maybe buy a six-pack, a 12-pack, a 32-pack, but you couldn't buy the 64 and 128, because that is for wholesalers. So if somebody has an account, that account becomes registered and approved as a distributor when they then go to the store, they now see twice as many products available. And this is one of my favorites. My business is a store, but you can't buy anything. And in this case, they needed WooCommerce. It's basically, they wanted a WooCommerce site. You could go to the site. You could view the catalog. You could add a product to your cart. You could even check out. But you didn't actually pay for anything. And what they were doing is they sell flame-resistant fabric. And so if you're the type of person that needs flame-resistant fabric, you need bolts and bolts and bolts of it. And what you're purchasing on this website are just little one-by-one sample squares. So they didn't want to charge for this, but it's still an e-commerce functionality. So all of this is done with maybe some custom coding, some plug-ins. There's a lot of different methods that one can go to trying to solve some of these problems. And if anyone has one of these problems that they want to talk through afterwards, I'm happy to discuss it. But let's take a look at how one, oh, I forgot this slide. Often clients who have problems that they bring to you, they're not always development problems. Sometimes it's an actual business problem. And as someone who is developing and working with businesses, it's very easy to just, OK, they need it to be delivered on this date at this time for whatever reason, and I'm not going to bother asking, it's just what they're telling me to do. It's very easy to get into that habit, and then you start building these very complicated websites that will cost the client more and more and more as time goes by. And I strongly recommend that when you are getting into these customization examples, talk to the client and determine why is this very important to you? Or this is going to take me 30 hours to do this, is that still an acceptable cost? Because oftentimes businesses have been doing things because that's the way they've been doing things. And one example I can think of is we had a client that does these workshops, and they have four payments, and it's $1,000 class, and you would think they would charge $250, $250, $250, $250, but instead they charged $650, $125, and then the remaining amount. And when we asked them why are you doing this, they didn't know, they've just been doing it that way for 14 years. It's just what they've always done. And they maybe had a good reason back then, but we don't need to do that today. But had we not asked that question, we would have spent 20 hours building some customized checkout process for this. So there's two main ways of modifying your WooCommerce site. Maybe a few more, but we're going to take a look at firstly, modifying theme files. So if you don't know this about WooCommerce, inside of the plugin itself, it has a set of theme files which you can copy and bring into your own website. You can copy from plugins, WooCommerce templates, take the file you want and paste it into your theme, and in your theme, you create a WooCommerce folder, and you basically maintain the same file hierarchy that is within the WooCommerce plugin. This is a very useful, simple method for modifying your WooCommerce website. The benefits of this, well, the benefits are pretty easy, is that it's simple to do. You can go in, you can add some content, you can remove some things, add a picture, add some classes, do whatever you need to do. The problem is that you then need to maintain these files as WooCommerce evolves. So anyone who's worked in WooCommerce has probably run into something like this. So if you're unfamiliar with this, so WooCommerce is a plugin, and plugins update and evolve over time, and so they change their theme files as their best standards and practices are improved. That's great. The bad news is that because you've copied a version of this into your own theme, if you don't keep up with the times, you will eventually break your own website just because you haven't been keeping up with whatever your plugin updates are. So whenever you update WooCommerce, you also need to take a look in the WooCommerce status area and see if any of your modified theme files also need to be updated. And in this case, this is a rather large site we had. You can see that we modified way too many theme files for these people. And when WooCommerce went from 2.x to 3.x, they changed a lot of theme files in that process. And we had to go through all of these that were highlighted. Take a look at what was the original version of the file, what is the edits that we made to that original version, what is the new version, what edits did they make, and then how can we apply our business need into the new WooCommerce standard. So my recommendation for editing and updating template files is try not to. Yes. Yeah. So that's a great question and just to repeat it. So if there is an update and you need to update very quickly due to security issues but you're working in an environment in which you are not readily available to make these updates for yourself, what should you do? My recommendation would be update the plugin depending upon the security issue. More commonly security issues are less related to what's in the theme file because the theme files are the visual component of your website. They aren't typically the anything functional related to your website. Not to say that there can't be security issues related to this and sometimes there are. But if you are in some sort of like crisis security patch, read the change log, make a determination of, okay, I need to wait or not. And then whenever you're updating plugins, I always say back up first, do it in a staging environment, make sure nothing breaks. Does that answer your question? So in this scenario, you're the agency and he's the customer and the customer may or may not update the plugin in time. I see. Okay. Right. So that's maybe a different discussion of client management related to WooCommerce. And I think this goes to my first line here is if you're in that scenario, try not to edit the theme files because you're not going to be around when those plugin updates are taking place. And we're going to look at another method for modifying things, which is generally more powerful, but sometimes a little more challenging to work with, but we'll get there. All right. Cool. Thank you. Great question, though. So if you are in a scenario where you are modifying these template files, I strongly recommend heavily commenting exactly what change you've made. Do an opening line, edit start here, make your edits, closing line, edits end here. Because what's going to happen is eventually you're going to have to do these three-way diffs of seeing what was the original, what is my version, what is the new version. And you're going to have to make the determination of do I take my edits and put it in the new thing, or do I take the new thing and apply it to my current file? And it cannot be a lot of fun sometimes. And so the best method is to use actions and filters. So if you're not familiar with actions and filters, there's a handy feature that comes with WordPress at large. Actions let you insert pieces of functionality inside of other processes. And filters let you take pieces of content and modify it for different use. So for example, if you wanted to send an email when someone completes a purchase, that would be an action. But if you wanted to change the name to say from Howdy Gary to Bonjour Gary, that would be a filter. So WooCommerce has a ton of filters built into it and a ton of actions as well. When you actually look at their template files, the template files are almost entirely made up of these do action end points. So while there may be some HTML wrapping to it, most of the time you can do things like I don't want the price of the product to display or I want it to be in a different order or something like that. You don't need to change the template. You can actually do it through actions and filters. It does require a bit more understanding of Woo under the hood, but it's much less likely to become deprecated. Because these template files aren't changing constantly. They will sometimes become deprecated and whenever you turn on your WPD bug, especially 3.0 and 3.3 started giving these notices saying, don't use this filter, it's now deprecated, use that filter. Even though it's deprecated, it should continue to work. So questions on actions, filters, anything like that before I move on? Yes? Question is, how long does the deprecation last and when do they remove it? I think it can be up to two years before they remove it. WordPress is very backwards compatible focused, but I don't know the exact answer to that. But I would argue it's going to be at least a year before they pull the trigger on it. Yes? Yes? Right, so that's a great question. So the question is, if the recommendation is to copy just the file that you're going to edit, what is the deficit to copying everything and bringing it into your theme? The deficit is this example of, in this case, we have all these things. Now, let's say I only needed to change the checkout form login, which didn't actually get updated in this case. I'm not going to know here which of these files I've edited and which of these files are WooCore. And so I would then need to go through each of them and figure out, well, what did I change or what didn't I change? And need to review them. Whereas if you had not copied over everything and only brought in the files that are important for your site, then it just defaults to the WooCommerce standard and you don't need to worry about that homework every time you do a plugin update. Cool, any other questions before we move on? Okay, so this is a quick little example of some stuff you can do with these actions and filters. So let's say in this scenario we wanted to add an extra checkout form field. And in this case, we're looking for someone's social security number. It could be anything in this case. But in this example, we need to create a checkout form field. So can you see my mouse up there? Yeah, okay, great. So here we're defining our function, add custom checkout field. This is taking the checkout variable and we're creating an argument for a new type of form field we're adding. So in this case, it's a text field. We're giving it the classes of SSN field. It's a form field wide, clear fix. Its label is last four of social. And then we can set a custom attribute. So in this case, we say max length of four characters. We then run the function WooCommerce form field. And that will add this new form field to the checkout. Now this function on its own won't do anything unless you actually declare I need you to fire somewhere and that's where the actions come in. So the action with WooCommerce before order notes. So if you were to look at the template for the checkout page, you would see all these different actions as part of the layout. And there's an order notes section and there's an action called before order notes and there's another action called after order notes. And using that action, you can then insert this piece of code. And that will then just print some HTML, which is your input field. So that would actually display the form field, but it won't necessarily validate it. So during the action WooCommerce checkout process, which is after somebody hits the submit button. But before credit cards have been processed and orders have been created and completed. So this is kind of early in that submissions process. We want to run is SSN valid. So in this case, we get the post value of last four SSN. If it's set, make sure that it is numeric. And if it is not numeric, give a warning. And then if it's not set, also give a warning saying that we need this to be set and then if none of these things fail, then the function just carries on, no problems at all. So that's for validation. But now we need to actually save this to the order. So we have another action we need to add. So WooCommerce checkout order, update order meta. So when WooCommerce is going through the process of actually saving the order to the database, it would already know first name, billing, email, address. We also need to specify, hey, you have this new form field, you're gonna wanna save this for later use. And kind of following the same pattern as before, we take the order ID, we get the last four, and we run a simple update post meta and sanitize the value before saving it to the database for security sake. So that's sort of like some back end functionality related to actions and filters. Do we have questions on that before I move on? Very good, okay. So this is an example of a process using actions and filters running in the background of your website. But instead of modifying theme files, you can also use actions and filters to modify the front end of your website too. So in this case, the first half of what we see here, everything above my cursor there, this is pulled directly from, I believe, the simple product, the single product template page. So on that product page, instead of seeing HTML, which says the title and then the rating and then the price and then the excerpt and then the add to cart, it's actually comprised of, what is this, eight different functions that all hook into this one action. So what the woo template does is it just says, when I reach this part of my process of building the website, go run all of these other functions and the functions will run in the order in which they are defined and that is done through what's called priority. So then this note that WooCommerce has left us states what is, oops, what is the function being run and what is its priority? Lower priority means first, higher priority means last. So in this case, the title is the first thing to display, then the rating, then the price, then the excerpt, et cetera. Down below is an example of, let's say for whatever reason, I wanted to move my product title and I no longer wished it to be at the top of the page, but I wanted it embedded with the rest of my content. I can, instead of going into like a theme file and deleting it and then adding it somewhere else or I can do this by removing and adding actions. So I would start by remove action, WooCommerce simple, or single product summary, WooCommerce template single title. So remove from this action set this function, which is the first we see here. And then I've added a five at the end, which is the priority of the function that I'm removing. So, and I know it's five from what's in the template file. I can then re-add the same function and say add action to the WooCommerce single product summary, add that same function as before, except this time give it a priority of 41. And so that means when the page is actually being printed out, it's the title is going to display somewhere between the WooCommerce template single meta and the WooCommerce template single sharing. I'm not sure why you'd want to do this exact example, but it's supposed to serve as an example of how you can modify your templates without actually copying them into your theme, yes. The gray section is just a comment. It's just a comment saying, hi, we're WooCommerce, this is what we're doing here. I could look through the plugin and maybe determine this, but this is just some notes so that I know I don't have to do that. Yeah, and two, even if that was the case, I wouldn't want to modify the theme file anyway because I'd have to keep updating it month over month too. Any other questions on this before we go? Move on, no? Okay. Another very simple and obvious method for modifying your WooCommerce site are the use of plugins. There's hundreds of thousands of them out there, I'm sure. They do a lot of great stuff. There's plugins for deposits, there's plugins for subscriptions, there's plugins for delivery, there's plugins for shipping, there's plugins for all kinds of stuff. A lot of them are great quality, a lot of them are not great quality. It kind of depends on which one you're gonna use. The good plugins have a lot of the functions and the actions and hooks that WooCommerce has as well. So, for example, the WooCommerce subscriptions plugin, which we use a lot, has a ton of things peppered into it so that we can extend it to say that we want our subscriptions to behave differently. The good news is that because they're relatively simple to install, you don't have to do a lot of work and it probably does more than you would want to sit down and code yourself. The bad news is it's not your code. Subscriptions might tomorrow decide we're doing things very different than however your business needs it and too bad, the rest of the internet needs it this way. So, I don't have a problem with using plugins, but make sure that whatever plugin you are using, you trust the developer, you trust the code and you're not just going on to the repo and blindly downloading everything with Woo in the title because that's gonna give you a lot of problems in the long run. Few recommended ones I say are Woo subscriptions. The WooCommerce one-page checkout is kind of an interesting tool where it combines the checkout page and a product page into a single template and the benefit to that is think of like PPC landing pages. So, instead of having to like add to cart, go to the cart, go to the checkout, get to the thank you page, you can have a landing page that just advertises whatever your product is and they can check out without ever having to leave that initially jailed experience. URL coupons is kind of an interesting one. So, if somebody goes to my website, question mark 10% off, that will then automatically add a 10% off coupon to their cart. Also useful for PPC campaigns, we've used it for radio campaigns too. Go to my website slash radio one, get this deal and it just instantly adds it to their cart. And I believe too URL coupons can be extended to force products being added to the cart based on landing on that URL as well. So, if you have like a very specific thing you're trying to sell. PDF invoices is kind of a nice one. It just kind of gussies up the receipts that WooCommerce has that they look nice for printing and you can use them as packing slips and everything. And they're very extendable and modifiable. So, this is a big topic. So, I think it's based on the room, it seems like a lot of people have been here. Shipping is always a hassle. I've, you're gonna spend 90% of your time building your website and 90% of your time dealing with shipping. So, there's a few different models that we're gonna take a look at and maybe some recommendations and some complaints on my end. But, this is an example of what's called the bin packing problem. And if you go on to Wikipedia and read about it it's just tons and tons of math I don't understand. But, the idea is, in this case we have nine products and we want them to fit as economically into five boxes as we can. This is the tightest packing configuration possible by the math in this example. And that's great, that's handy. Computers can do this sort of stuff for us. And the problem is that computers also need to know a lot about your products in order to accomplish this. Now, if you're using a plugin like FedEx or Canada Post or UPS or any of these other calculated shipping tools, this is the problem that they're trying to solve. And they're very powerful for that reason. And the intent here is, I have a product, I need to ship my product and I want to charge my customer the exact amount that it takes to ship it. Not too much because I don't want to overcharge them and not too little because I don't want to lose money. That can work very well if you have very few products that you're worrying about. But when you start getting into some very complicated shipping rules or huge product libraries it means that this plugin needs to understand the size of your box, the various sizes of your boxes, the size of your product or more importantly not the size of your product but the size of your product's packaging, the weight of your product and that's most of it right there. But, and then also where is it being delivered from and where is it going to? Those are also factors. So if you have a very small product catalog and you can very easily get all of this information by all means have a blast. Like it can work very, very well. But for the most part people aren't in this situation or they think they have it right and then they go to the post office and they've lost 60 bucks on shipping because they were selling these water bottles and on the website they said the water bottle is a foot tall and four inches wide but they forgot to mention that the box it's in is two and a half feet tall and so it gets to the post office and they don't, they're charging based on the box size not based on the product size. And that's an important thing that most people don't realize with WooCommerce is when you're adding in your size attributes they want the packaging size, not the product size. That's what's used in all these calculations. Even though it displays on the front end it doesn't accurately describe the product which is always a complaint of mine. But so it can be great, it can be complicated and it can go very good or very bad. Yes, yep. So the question is, is it possible to have a display size and a shipping size? And the answer is yes, but you need to do it yourself. And so you can, using actions and filters like we've discussed before is create custom admin fields which will then display both sets and will replace the front end, the front end fields with the one with your display settings as opposed to your shipping settings. Yeah, that's a good plugin idea. Someone hasn't done that, I should do that. Okay, any other questions? Questions on that? Trying to jam all those things in boxes, thoughts there? Worst thing I've ever heard is when I asked, the customer really, really, really wanted this and I asked them what sizes are your boxes and they said, I don't know, just whatever we have lying around. And that's not gonna work for you guys. So that's why I like table rate shipping. This is my favorite. If I could be king for the day, 95% of people would be using table rate shipping. This is, so the idea of table rate shipping is you can set conditions to, and this is a WooCommerce extension, well worth its weight in gold, but you can set cart conditions to determine what is going to be the price of shipping for your products. So in this case, we have two shipping classes. We have medium and small. Anything that is a quantity between one and a thousand in the medium shipping class is going to have a minimum base shipping cost of $5 with $3 for every additional product. And then when we're looking at the smalls, anything between one and 49 is treated one way and everything between 50 and a thousand quantity is treated differently. So this is great for just creating these very broad wide nets for shipping rules. I find that they're generally easier for customers to understand. Everything on the website is $10 per product. Very easy to understand. They don't feel like they're getting scammed. It's customer service can respond very easily as opposed to, I don't know why it's 1745. That's what I was told. So it's hard to, it can be hard to communicate the calculated shipping rates with customers. That being said, sometimes you're gonna make money on shipping and sometimes you're gonna take a bath. And what I recommend to customers or clients who are going down this route is let's look at your orders you've already done and what's your average shipping cost. And then let's look at it as an average order value and spread it out across everything. So the intent is to in aggregate have your shipping work at large instead of having every order exactly specific. Thank you, Tim. So here's our two models. There's a few other approaches but I think these are the major ones. So bin packing, pros to it, shipping can be exactly correct. Math is good for you, math is done for you rather. And some plugins can even like package and ship the shipping labels for you so you could print them out and slap them on the box like stamps.com is a great example. A con to this is you gotta know your uniform box sizes. You gotta know the size of all your products. And especially if there's packaging like Styrofoam or ice or anything, you can't forget that when you're doing these calculations. And that can very easily complicate it too. Table rate shipping, however, is much more predictable. A five year old can do the math more often than not. Much easier to manage each product. You don't have to worry about measuring everything. And it's more flexible for the business owner. It is inexact and if you're uncomfortable with inexact this might not work well for your business. But it does require an understanding of your whole business strategy. You can't look at it at a per order basis. And so you gotta be willing to adapt because of that. And you might find out you're losing money and so you up the rates or you might be making too much and you take it down. It's not set in stone. So that's the end of my talk here. We've answered a few questions but any other questions at this time? No? Okay. All right, well, my slides are on Twitter. You can check them out there. If you have any specific things you wanna discuss with me I'll be kicking around here for a little bit. Oh yeah, question. Yeah. The largest thing I would change is the databaseing structure of WooCommerce. The fact that orders are saved directly into the post table is a very cumbersome loading, in my opinion. There are two new plugins I've seen recently. One of which removes orders into its own table and another puts products in its own table. And I have not experimented with these. My understanding is that they've improved site speeds considerably. I don't know what impact that would have on the whole ecosystem of WooCommerce and how many plugins can and cannot work in that but that would be my first challenge, personally. Anything else? Any other questions? Yeah, good question. So the question is would you recommend whether you put your hooks and filters in its own plugin or part of your theme in the functions file? I think both can work. I generally package it with my theme but I package it as its own standalone PHP file called Woo Overrides. And then if there was maybe a Woo Subscriptions Overrides and a Woo Deposits Override, they would be their own files. Because, A, it's segmented and modular enough that if you do need to move it, you can. It won't become deactivated by mistake and generally if I'm building themes for clients, so much of the functionality is baked into the theme that having it as its own standalone plugin, I'm not gonna copy it and give it to another client or when we rebuild the theme, that exact plugin probably won't work. So that would be my approach. Anything else? Okay, cool. I think we're at time and oh, one more. Yeah, they made changes to their cred structure in 3.0 and for anyone who doesn't know, cred stands for Create, Read, Update, and Delete and thank you, five. And it's a way, so WordPress, looking at how WordPress updates posts and pages, you would do update post meta and or delete post meta or create post. Which is great, you're kind of dealing on it with individual items that are being changed in the database. With a cred structure, you're grabbing, say a product as a PHP object and you are modifying it to create, remove or create, read, update or delete and then afterwards you save the changes that you've made and then that all gets pushed back into the database. So it's, I can't think of words to describe it but for me it just kind of feels more self-contained as opposed to a bunch of just strings hanging out in the wind saying I'm doing this change and I'm doing this change and I'm doing this change. It's just more packaged into the product. Yeah, I mean I would say that if you're doing WooCommerce you should be doing cred all the time if you can now because that is the new standard. And the old way is still working because the old way is the WordPress way and as long as WordPress does it'll continue to work but I find cred to be a lot easier to work with. Any others? Okay, cool. And we got the after, yeah, you got it. So I'll take it from here. So at this point we're gonna have the opening of the closing remarks.