Arvind Kumar
Posted on October 1, 2022
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>
Posted on October 1, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
