Join Patrick Rauland for an in-depth discussion in this video Look into field types, part of WordPress Ecommerce: WooCommerce Plugins.
- We've added one field, but there are a ton of different fields. For this store, we really only need the one Assembly Instructions field. But I'd like to show you the different types of fields so you know how to use them. Earlier, we used the function "woocommerce_wp_text_input", and I'm hoping to try to find the file that has this function and other useful functions for us to use. So I'm going to copy this, and then, in Admin, I'm going to right click on woo commerce and then click Search in Directory.
There it is. Go ahead and press enter. Now, it's going to look through this entire folder for all instances of this. And if I scroll down, I'll see Function, which is exactly what I want, and the name of the function. This is the file I want, under woo commerce includes admin and then WP Metabox Functions. And it looks like this file has everything we need to know about the text input, place holders, classes, wrappers, descriptions, and different types of text fields; price, decimal stock, et cetera.
As well as other functions, like a hidden input or a text area, or a checkbox, a ton of other different types of fields. So let's go ahead and create some of these. I'm actually going to start with the price field. Now, there is no price field, it's just a text field with a type of price. I'm going to go back to my code now. And right beneath the text input, I'm going to copy and paste on line 40, and paste it down there.
And what we need is we still need an ID. I'll keep a little underscore there and change this to price. The label can be price. We aren't going to need a place holder this time. But as per the description right here, we are going to need something called Data Type, which is something that we have to pass in. So I'm going to add Data Type, and we want it to be price. If I save this and go back to the Admin, and click on Assembly Instructions, I now see a price field.
And I can change this to anything I want. And it's working with the exception of it's not saving it because we haven't covered saving. But the price field seems to be working, it also does fancy things like validation because it has a Data Type of price. I do want to point out one more thing, if you use the same ID as another field, for example, this price, that's why you might see something auto-populate right here, so we should be more specific. We shouldn't call this Price, let's call this our Custom Functions Price, or the Kite Price, something more specific so we don't get anything confused.
Let's add a select box, because that's quite different from a regular text input. You could use this when you want each of your products to choose a predetermined option, like if there were three different shipping instructions for your products and each one can choose a different shipping instruction. Let's go back to our code. I'll copy this, just as a starting point. I'm going to paste it in, except it's no longer text input, we want to change this to WP Select.
The ID is the same, we'll just change it to Select. The label is basically the same thing, change that to My Select Field. And now we don't need the Data Type, but we are going to need the options for the select box. And if you look through the Metabox Functions file, you'll be able to see exactly what these look like. I'll just go ahead and type them in, options, and this is now an array.
Each one used to have a key followed by the text within the option. So I'll just call this Option One. And the text domain, and then I'll copy and paste the other two.
Alright, just about done here. Now, if I save this and go to the Add a Product page, we can see what we've done. We'll click on Assembly Instructions, and there it is. So this is really helpful when you have a client who might accidentally type in something incorrect, this way you can give them options and they can't mess it up. So in future video, we're going to cover how to save all of these options.
- Creating a WooCommerce plugin
- Finding hooks within WooCommerce
- Creating settings pages
- Analyzing WooCommerce settings
- Configuring settings
- Customizing the edit product page
- Using hooks on the product page
- Customizing the WooCommerce checkout
- Adding custom order statuses
Skill Level Intermediate
Q: This course was updated on 08/07/2018. What changed?
A: The following topics were updated: adding a meta box, saving product fields, customizing product titles, and adding data to product page tabs.