Join Patrick Rauland for an in-depth discussion in this video Add a new product tab, part of WordPress Ecommerce: WooCommerce Plugins.
- [Instructor] Since we're working on a website for kites, I want to make it super clear how to assemble our products. So I want to add an assembly instructions link to our product pages. And since that doesn't relate to our other product settings down here, I'm going to add our own settings tab. Now we're going to start by duplicating our WooCommerce example plugin that we created earlier. So I'll go to my code editor, and I'll duplicate this folder right here, WooCommerce Example Plugin, and since we are creating a plugin for assembly instructions, I'll call it that.
WooCommerce assembly instructions. And then I will make sure to rename the plugin file. WooCommerce assembly instructions. And then I'll go ahead and open this up. So let's go ahead and change the name. Let's give it a proper description.
Add assembly instructions to the product page. Change the text domain, and now let's go ahead and change it here. So on line 18, wc assembly instructions, and I'll copy and paste this here. And down here.
And I'll go ahead and get rid of this default code that we had left over. So I'll go ahead and save this and now we need to know how to write a function to add one of those metaboxes to the product page. Now I did some Googling, about product data tabs, and there actually isn't much luck. There isn't really any documentation and there's a lot of confusion between product data tabs on the front end. There seems to be a lot of confusion about the product tabs on the front end, and the product data tabs on the back end.
They use very different code, so if you're reading the wrong tutorial, you're going to end up in the wrong place. So I did a search for some of the field names on the edit product page and would up down here. So we'll go to WooCommerce includes admin, metaboxes and then class wc metabox product data. Now this file should tell me everything we need to know about how to display the product data box. If we scroll down a bit, we'll see the default product data boxes.
General, inventory, shipping, linked products, attributes, and a few other things. And those match up very nicely with what's on the back end. General, inventory, shipping, et cetera. Now if I look up, I see return apply filters. This is what we're going to need to customize this, so I'll copy this filter name here on line 78. I'll go back to our custom plugin on line 21 and I'll say add filter.
I'll paste in that filter name. Let's look for function in this object, and we're going to call it something simple like my product data tab. Before we continue, by default, all hooks fire at priority ten, but I don't really want to mess up anything, so I want to make sure that mine runs after the default. So I'll set mine to 20. I'll add my semicolon here before I forget.
And now we can create this function. I'll copy this. Public function paste in that name right there. And since this is a filter, that means we're going to get a parameter. And I'm going to call it something simple like product data tabs. And then before I forget, I'm going to make sure that I return it. Now we can go ahead and write the custom code we need to write.
Now I'm going to go back to the admin file here, I'm going to copy and paste on lines 79 to 83. So this is the general tab, and I'm going to reproduce this in our custom plugin. Notice that there's three things here, there's the label, which is obviously the label for the tab. There's the target, which is the HTML that we want to display once someone clicks on the tab, and then there's the class. And the class lets you conditionally hide something. So if your settings only apply to simple products, you would use something like a show if simple.
If they don't apply to variable products, you might do something like show if var... Or if your settings only apply to variable products, you would use show if variable. You'll have to go through this page to see all of the different options, but I'll go ahead and copy the general tab. I'm going to go back here. And we're going to take the existing parameter and I'm going to add an extra item to the array, because it is an array.
Now we're going to paste in what we got from the other file. I'll just remove this since we don't need that. And I'll indent that. And now let's go ahead and change some of these, so the label will instead be assembly instructions. We'll use our text domain from up here, instead of the default WooCommerce text domain. For the target, we haven't written this yet, but it's going to be assembly product data.
And we want this to work for every single product, so we'll just get rid of this. I'll go ahead and save this. And if I go back to my website, let's make sure that this works. First, let's go to plugins and make sure that this is on. I'll turn off opening hours. I'll turn on assembly instructions, so it's on. Let's go to one of our products. And if we scroll down, there's assembly instructions.
Now, we haven't created the HTML yet for what the settings should look like, but it is loading something. And our tab is there. So in a future video, we're going to add the settings to this tab.
- 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.