Add Custom Fields to WooCommerce Product Categories

WooCommerce is the most popular ecommerce plugin for WordPress. When developing WooCommerce themes, it is often necessary to add custom fields to meet specific needs. Because WooCommerce is built on top of the WordPress ecosystem, many WordPress APIs can be used directly inside WooCommerce. Below, we will use the example of adding a font icon to a product category to explain how to add custom fields for WooCommerce product categories. The final effect looks like this.

Add a form field to the product category creation screen

First, on the product category creation screen, we add a field for the icon. The user enters the icon name. I am using a font icon in this example, but it could just as easily be an image URL. Here we use the WooCommerce-specific hook product_cat_add_form_fields to add the field to the category creation screen.

// Category add form
function tutorialshares_taxonomy_add_new_meta_field() {
    // this will add the custom meta field to the add new term page
    ?>
    <div class="form-field">
        <label for="term_meta[term_icon]"><?php _e( '图标', 'woocommerce' ); ?></label>
        <input class="regular-text" type="text" name="term_meta[term_icon]" id="term_meta[term_icon]" value="">
    </div>
<?php
}
add_action( 'product_cat_add_form_fields', 'tutorialshares_taxonomy_add_new_meta_field', 10, 2 );

Add a form field to the product category edit screen

The product category edit screen uses product_cat_edit_form_fields. It is basically similar to the previous example, except that it also includes the existing value that was already saved. In fact, the two could be combined into a single feature if needed.

// Category edit form
function tutorialshares_taxonomy_edit_meta_field($term) {
    // put the term ID into a variable
    $t_id = $term->term_id;
 
    // retrieve the existing value(s) for this meta field. This returns an array
    $term_meta = get_option( "taxonomy_$t_id" ); ?>
    <tr class="form-field">
    <th scope="row" valign="top"><label for="term_meta[term_icon]"><?php _e( '图标', 'woocommerce' ); ?></label></th>
        <td>
            <input class="regular-text" type="text" name="term_meta[term_icon]" id="term_meta[term_icon]" value="<?php echo esc_attr( $term_meta['term_icon'] ) ? esc_attr( $term_meta['term_icon'] ) : ''; ?>">
        </td>
    </tr>
<?php
}
add_action( 'product_cat_edit_form_fields', 'tutorialshares_taxonomy_edit_meta_field', 10, 2 );

Finally, save the submitted data to the database

WooCommerce stores product category field data directly in WordPress’s wp_options table. Personally, I think this is a good design, because product category custom fields usually do not need to be numerous, and creating a dedicated table for them would add a lot of complexity. The WordPress wp_options table is essentially key-value based, which also makes it a good fit for this kind of custom-field data. WordPress provides a very convenient API here too, so we can simply use update_option to save the value.

// Save category data
function save_taxonomy_custom_meta( $term_id ) {
    if ( isset( $_POST['term_meta'] ) ) {
        $t_id = $term_id;
        $term_meta = get_option( "taxonomy_$t_id" );
        $cat_keys = array_keys( $_POST['term_meta'] );
        foreach ( $cat_keys as $key ) {
            if ( isset ( $_POST['term_meta'][$key] ) ) {
                $term_meta[$key] = $_POST['term_meta'][$key];
            }
        }
        // Save the option array.
        update_option( "taxonomy_$t_id", $term_meta );
    }
}  
add_action( 'edited_product_cat', 'save_taxonomy_custom_meta', 10, 2 );  
add_action( 'create_product_cat', 'save_taxonomy_custom_meta', 10, 2 );

Retrieve the custom field value for a product category

As you can see from the saving code above, WooCommerce stores product category custom fields in the wp_options table. When we need to read the data, we can simply use WordPress’s get_option function.

$meta_field_array = get_option('taxonomy_'. $term->term_id);
$meta_icon = $meta_field_array['term_icon'];