Add Custom Field to WooCommerce Product Category without Plugin

Usually, you might want to consider using a plugin like ACF plugin, but we like to keep website lightweight so let’s do this with some code.

We will add 2 fields, one is a simple text input, and another is select dropdown. For the demo purpose will store values like background color (in text field) and frontend visibility (in select dropdown), you are free to store any information you like.

Show fields when new category is created

Here we will use the product_cat_add_form_fields() hook to add html of our custom fields. The most important thing here is the name of form fields because we will use the name to store these fields.

<?php
// show custom fields when new category is created
function add_custom_field_to_prod_category() { ?>
    <div class="form-field">
        <label for="term_meta[cat_bg_color]">Background Color</label>
        <input type="text" name="term_meta[cat_bg_color]" id="term_meta[cat_bg_color]" value="" />
        <p class="description">You can use rgb() or hexadecimal style.</p>
    </div>
    <div class="form-field">
        <label for="term_meta[cat_visiblity]">Visibility</label>
        <select id="term_meta[cat_visiblity]" name="term_meta[cat_visiblity]">
            <option value="no" selected>No</option>
            <option value="yes">Yes</option>
        </select>
    </div>
<?php }
add_action('product_cat_add_form_fields', 'add_custom_field_to_prod_category', 10, 2);

Show fields when category is edited

We also need to show the custom fields when an old category is edited. This time we also need to prefill with the saved data. We can get the already stored data with get_option() function.

<?php
// show custom fields when category is edited
function edit_custom_field_to_prod_category($term) {
    $t_id = $term->term_id;
    // store meta values to autofill form fields
    $term_meta = get_option("taxonomy_$t_id");
    ?>
    <tr class="form-field">
        <th scope="row" valign="top">
            <label for="term_meta[cat_bg_color]">Background Color</label>
        </th>
        <td>
            <input type="text" name="term_meta[cat_bg_color]" id="term_meta[cat_bg_color]" value="<?php echo esc_attr( $term_meta['cat_bg_color'] ) ? esc_attr( $term_meta['cat_bg_color'] ) : ''; ?>" />
            <p class="description">You can use rgb() or hexadecimal style.</p>
        </td>
    </tr>
    <tr class="form-field">
        <th scope="row" valign="top">
            <label for="term_meta[cat_visiblity]">Visible</label>
        </th>
        <td>
            <select name="term_meta[cat_visiblity]" id="term_meta[cat_visiblity]">
                <option value="no" <?php echo $term_meta['cat_visiblity'] == 'no' ? 'selected' : ''; ?>>No</option>
                <option value="yes" <?php echo $term_meta['cat_visiblity'] == 'yes' ? 'selected' : ''; ?>>Yes</option>
            </select>
            <p class="description">Toggle to make it visible as colored box.</p>
        </td>
    </tr>
<?php
}
add_action('product_cat_edit_form_fields', 'edit_custom_field_to_prod_category', 10, 2);

Save custom fields

Now finally we will save all custom fields with the same callback function and hooking at two actions.

<?php
// save custom fields callback function
function save_custom_field_to_prod_category( $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_custom_field_to_prod_category', 10, 2);
add_action('create_product_cat', 'save_custom_field_to_prod_category', 10, 2);

Fetch stored data

Here’s an example of how we will get the stored data in our custom fields. So that was easy enough, right ?

Next time you’ll think twice to use any plugin for adding custom fields in product categories.

<?php
$all_categories = get_terms(
    array(
        'taxonomy' => 'product_cat',
        'orderby' => 'name',
        'order' => 'asc',
        'hide_empty' => false,
    )
);
?>
<ul>
    <?php foreach ($all_categories as $category) { ?>
        <?php $term_meta = get_option("taxonomy_$category->term_id"); ?>
        <li>
            <a href="<?php echo get_term_link($category->term_id); ?>">
                <?php echo $category->name; ?> - <?php echo $term_meta['cat_bg_color']; ?> - <?php echo $term_meta['cat_visiblity']; ?>
            </a>
        </li>
    <?php } ?>
</ul>

Comments

[Michael Beckwith]

I'm confused as to why you're storing your information in the options table, when there's term meta already available with get_term_meta() and update_term_meta() and whatnot.

[Arvind Kumar]

Thanks for pointing it out, I totally missed that.
wp_terms table is better suited for this.
here's a list of main tables of wordpress.
oracle-patches.com/en/web/wordpres...

[ncitl]

I would add exactly the same secondary description field (with all text editing tools, not simple text area) but to product fields, not to product category fields.
Would you know the snippet which could make that ?
It would be amazing !