In a previous post I wrote about how to add a custom WooCommerce product type, I also scratched the surface there about how to add custom fields to the new product type. Here I want to go a bit more in depth on how to add a new product fields to your WooCommerce products (which can be your own custom, or existing simple/variable etc products).

Adding a custom settings panel

A custom settings panel within your product can be used to segment your own settings in a separate section. This will work great if there is no good position available within the existing panels in the WooCommerce product settings.

The example below will add a ‘Gift card’ settings panel;

With the above in place, you should have a result similar to this.

Repositioning the custom settings panel

At the moment of writing it is not possible to prioritise/reposition a settings panel in a pretty way. There still is a way as shown below, but in my opinion this is a lesser way of doing it. Be sure to replace the custom_product_tabs function that was created in the previous code snippet with the one below.

This will add the new product panel after the second (‘Inventory’) tab, you can change the position by changing the insert_at_position in the function. This code will simply insert the $new_tab in between existing tabs. This isn’t a ideal way of repositioning a settings tab, but it seems to be best way without breaking anything.

I’ve send a Pull Request to WooCommerce that will allow you to add a priority => 15 parameter to the array, allowing you to have a nice and pretty way or ordering the product data panels. See the current status here; https://github.com/woocommerce/woocommerce/pull/13260

Update: the pull request has been accepted and you can now sort the tabs more easily using the ‘priority’ parameter.

Setting the custom settings panel icon

The icon you’ve seen in the screenshot earlier above isn’t exactly useful, pretty or anything near what you may want/need. There are two ways of changing the icon, both are using CSS to modify the specific tab, but one uses the available WooCommerce Icons, and the other one includes adding a fully custom icon of your own.

Using a WooCommerce Icon

There are a bunch of WooCommerce Icons available, but they are limited. You can find all of them in the following GitHub repository; WooCommerce Icons. In order to view and choose a icon, you need to ‘Download ZIP’, unpack and open the ‘demo.html’ in your browser.

In that file you search your fitted icon, and copy the code below the icon. You can then insert a bit of custom CSS in your plugin (recommended to add a stylesheet).

The li.giftcard_options identifies the correct product tab and it will add the correct icon.

Using a fully custom icon

If you can’t find an icon in the existing ones that WooCommerce offers, you can also add your own. Below I will show an example how it can be done using a SVG icon. Another way would be by using a other custom font family (for example Font Awesome).

Adding a custom-custom product field

WooCommerce has a bunch functions available for default fields (overview of all of them), but they may not fit your needs. One example of a custom field I like to use is a very neat drop down upgrade like Select2 which should be included in WP Core sometime soon (originally planned for 4.2, didn’t make it), it however is included in WooCommerce.

In the code snippet below I’m adding my custom formatted HTML to display the setting to fit my needs. The code should be added to the giftcard_options_product_tab_content() function.

(WooCommerce is loading select2 by default, but it is a good idea to add that as a dependency to your plugin)

And of course, don’t forget to save the values in the save_giftcard_option_fields function;

Adding product options (like ‘Downloadable’ and ‘Virtual’)

For this example, it would make sense that one would like to distinguish regular simple products, from the actual gift card products. As we’re not using a custom product type for this a good alternative would be to add a new checkbox in the meta box header. It will be positioned right beside the ‘Virtual’ and ‘Downloadable’ options.

The following code adds the new option.

And in order to save the checkbox;

EXTRA: Only display the Gift Card tab when checked

Now that we’ve added the gift card check, we can also only display the ‘Gift Card’ product data panel when the ‘Gift Card’ product option is checked. Lets first change the custom_product_tabs() function. Change the array( 'show_if_simple', 'show_if_variable' ), to array( 'show_if_gift_card' ),

As WooCommerce doesn’t know about our new setting, the right functions to make our new show_if_gift_card class work as we need aren’t there. To get this working we need to add a bit of JavaScript.

You can add the code snippet above to the wcpp_custom_styles() function (Whoops! now its actually named wrong!)

Thats it!

You’ve now added a ton of cool things on the backend of your product page. In a future post I will dig into how you can display these same custom field on the front end of your website and display them in the cart.

Here you can find all the code used in this post in one file; https://gist.github.com/JeroenSormani/6b710d079386d096f932

I would love to hear from you if this was useful in any way, have feedback, missing something that you’d love to see or just a Thank you 😉