Add custom tab to Product Data area of Edit Product page

Add a custom field to Edit Product page. Add a custom tab to organise it.

In the last post I described a client that has changed from hiring out dresses to selling second hand designer items. This time I was working on adding an extra field to the products to describe their condition.

Consistency

I decided to create a new tab in the Product Data area of the Edit Product page as I didn’t feel that the product condition fit anywhere else.

I got some initial code from Rodolfo’s WooCommerce: Add RRP to Products post, with the save code being most useful.

To aid usability and to ensure that the client doesn’t enter random information I chose to use radio buttons. For easier code maintenance I wrote a small function that returns the radio buttons values and text. This is called in a few locations and is used for validation.

Note: I didn’t end up using the code because the client already had a ‘Condition‘ attribute (which is better as it can be used for searches). While the screenshots and images below are a hypothetical example, the code is all valid.

Other field types

I used radio buttons (woocommerce_wp_radio() function). In Rodolfo’s post he has a text input (woocommerce_wp_text_input()).

WooCommerce also provides for hidden fields (woocommerce_wp_hidden_input()), textarea (woocommerce_wp_textarea_input()), checkboxes (woocommerce_wp_checkbox()) and dropdowns (woocommerce_wp_select()).

Display in Additional Information tab

I always tell people that once you have the data stored somewhere then you can do anything you want with it. Here I chose to show the care information in the “Additional Information” tab on the single product page. You could display it anywhere you want.

Rodolfo wrote about displaying a custom field in category pages.

The code