This WooCommerce customization helps in adding custom URL field for each product category. By adding the custom URL, store owners can enhance user experience by directing customers to relevant external sources, such as special offers, featured products, or promotional pages, etc.
Solution: Add Custom URL Field for WooCommerce Product Categories Page
The code adds a new input field (for a custom URL) on the “Add New Category” and “Edit Category” pages in the WooCommerce Products> Category pages.
// Add custom field to the Add New Term page
function ts_custom_url_add_new_meta_field() { ?>
<div class="form-field">
<label for="term_meta[custom_term_meta]">Custom URL</label>
<input type="text" name="term_meta[custom_term_meta]" id="term_meta[custom_term_meta]" value="">
<p class="description">Add a custom product URL for the category.</p>
</div>
<?php }
add_action('product_cat_add_form_fields', 'ts_custom_url_add_new_meta_field');
// Add custom field to the Edit Term page
function ts_custom_url_edit_meta_field($term) {
$term_id = $term->term_id;
$term_meta = get_option("taxonomy_$term_id");
$value = isset($term_meta['custom_term_meta']) ? esc_attr($term_meta['custom_term_meta']) : ''; ?>
<tr class="form-field">
<th scope="row" valign="top"><label for="term_meta[custom_term_meta]">Custom URL</label></th>
<td>
<input type="text" name="term_meta[custom_term_meta]" id="term_meta[custom_term_meta]" value="<?php echo $value; ?>">
<p class="description">Add a custom product URL for the category.</p>
</td>
</tr>
<?php }
add_action('product_cat_edit_form_fields', 'ts_custom_url_edit_meta_field');
// Save custom field values
function ts_save_custom_url_meta($term_id) {
if (isset($_POST['term_meta'])) {
$term_meta = get_option("taxonomy_$term_id") ?: [];
foreach ($_POST['term_meta'] as $key => $value) {
$term_meta[$key] = sanitize_text_field($value);
}
update_option("taxonomy_$term_id", $term_meta);
}
}
add_action('edited_product_cat', 'ts_save_custom_url_meta');
add_action('create_product_cat', 'ts_save_custom_url_meta');
// Display custom URL on product category pages
function ts_display_custom_url_on_category_page() {
if (is_product_category()) {
$term = get_queried_object();
$term_id = $term->term_id;
$term_meta = get_option("taxonomy_$term_id");
if (!empty($term_meta['custom_term_meta'])) {
echo '<p>
<a href="' . esc_url($term_meta['custom_term_meta']) . '"
target="_blank"
style="font-weight: bold; text-decoration: underline;">
Explore Featured Courses
</a>
</p>';
}
}
}
add_action('woocommerce_archive_description', 'ts_display_custom_url_on_category_page');
Output
When you visit the WooCommerce product categories page, you can see the new custom field added. The field is labeled as “Custom URL Category” and allows the admin to insert a relevant link as shown below.
On the front-end, when viewing a product category page, it checks if a custom URL is set for that category. If present, it displays the custom URL as a clickable link, directing the user to the external resource. In the example above, we’ve added the URL slug for the Lifestyle category to the Art category page URL field. Now, let’s see how the custom URL text appears on the frontend of the Art category page.
When the custom URL is clicked, it will redirect to the specific slug entered in the custom URL field. In our case, we have entered the URL of the Lifestyle category page.
By adding custom URL fields for WooCommerce product categories, store owners can guide customers to specific external resources like promotional pages, featured products, or special offers, improving the overall shopping experience. If you’d like to display custom input fields for specific product categories directly on product pages, check out our detailed guide and explore how it works!
