This article is an extended part of my previous one where I described how to add a multi-select custom taxonomy field in the add/edit product form of the Dokan Vendor Dashboard.
Within this article, my focus will shift towards demonstrating how to introduce a single-select custom taxonomy field within the add/edit product form of the Dokan Vendor Dashboard.
Creating a Custom Taxonomy
Let’s start by creating a taxonomy that is tailored for the product post type. I have chosen the name ‘Location’ to represent this taxonomy. The code snippet below shows how to implement this taxonomy.
use WeDevs\Dokan\Walkers\TaxonomyDropdown;
#-- Custom Taxonomy Type - Location (For Product Post Type) --#
function product_custom_taxonomy_item() {
$labels = [
'name' => 'Location',
'singular_name' => 'Location',
'menu_name' => 'Location',
'all_items' => 'All Location',
'parent_item' => 'Parent Location',
'parent_item_colon' => 'Parent Location:',
'new_item_name' => 'New Location Name',
'add_new_item' => 'Add New Location',
'edit_item' => 'Edit Location',
'update_item' => 'Update Location',
'separate_items_with_commas' => 'Separate Location with commas',
'search_items' => 'Search Location',
'add_or_remove_items' => 'Add or remove Location',
'choose_from_most_used' => 'Choose from the most used Location',
];
$args = [
'labels' => $labels,
'hierarchical' => true,
'public' => true,
'show_ui' => true,
'show_admin_column' => true,
'show_in_nav_menus' => true,
'show_tagcloud' => true,
];
register_taxonomy( 'location', 'product', $args );
}
add_action( 'init', 'product_custom_taxonomy_item' );Note: The statement has been written using the "use" keyword will be utilized later in this article to import the taxonomy walker and enhance the appearance of the dropdown list
Once you have incorporated the given code, you will notice that the ‘Location’ taxonomy has been successfully integrated into the product post type. This will enable you to easily assign and retain the ‘Location’ category directly from the backend.
Adding Custom Taxonomy on Add Product Form
In order to enhance the functionality even more, let’s integrate support for the ‘Location’ taxonomy within the Dokan Add New Product form/page. You can find the code snippet below, which demonstrates how this can be achieved:
#-- Custom Taxonomy (Location) Field on the Add New Product Form --#
function custom_taxonomy_location_on_new_product_form() {
$location_args = [
'show_option_none' => __( '- Select a location -', 'dokan-lite' ),
'hierarchical' => 1,
'hide_empty' => 0,
'name' => 'location',
'id' => 'location',
'taxonomy' => 'location',
'orderby' => 'name',
'title_li' => '',
'class' => 'dokan-form-control dokan-select2',
'exclude' => '',
'walker' => new TaxonomyDropdown()
];
echo '<div class="dokan-form-group">';
echo '<label>Location</label>';
wp_dropdown_categories( $location_args );
echo '</div>';
}
add_action( 'dokan_new_product_after_product_tags', 'custom_taxonomy_location_on_new_product_form' );Saving Custom Taxonomy Field value
Let’s proceed with the process of saving the field values when creating a new product. Additionally, the given code ensures that the field values are also updated when modifying product data from the Edit Product Page.
#-- Save Custom Taxonomy (Location) Field Values --#
function save_vendor_custom_taxonomy_location( $product_id, $postdata ){
if( !empty( $postdata['location'] ) ){
wp_set_object_terms( $product_id, (int) $postdata['location'], 'location' );
}
}
add_action( 'dokan_new_product_added', 'save_vendor_custom_taxonomy_location', 10, 2 );
add_action( 'dokan_product_updated', 'save_vendor_custom_taxonomy_location', 10, 2 );Adding Custom Taxonomy on Edit Product Form
With the code to save values from the Edit Product Page field implemented successfully, our next exciting challenge is to showcase these values on the very same page, right in their corresponding fields.
#-- Custom Taxonomy Field (Location) on the Edit Product Form --#
function custom_taxonomy_location_on_edit_product_form( $post, $post_id ){
$term = [];
$term = wp_get_post_terms( $post_id, 'location', [ 'fields' => 'ids' ] );
$location_args = [
'show_option_none' => __( '- Select a location -', 'dokan-lite' ),
'hierarchical' => 1,
'hide_empty' => 0,
'name' => 'location',
'id' => 'location',
'taxonomy' => 'location',
'orderby' => 'name',
'title_li' => '',
'class' => 'dokan-form-control dokan-select2',
'exclude' => '',
'selected' => $term[0] ?? '',
'walker' => new TaxonomyDropdown( $post_id )
];
echo '<div class="dokan-form-group">';
echo '<label for="location" class="form-label">Location</label>';
wp_dropdown_categories( $location_args );
echo '</div>';
}
add_action( 'dokan_product_edit_after_product_tags', 'custom_taxonomy_location_on_edit_product_form', 10, 2 );Final Result
As a result, you will be delighted to find that the custom taxonomy field is now prominently displayed on both the Add New and Edit Product pages. What’s more, these valuable values are being seamlessly preserved when saving your changes.
Bonus Part
Our next objective is to display the saved value on the Single Product Page of WooCommerce. This task will be achieved by implementing the following code:
#-- Show Custom Taxonomy (Location) Values on the Single Product Page --#
function custom_taxonomy_location_on_frontend() {
global $product;
$location_count = wp_get_post_terms( $product->get_id(), 'location', [ 'fields' => 'ids' ] );
$location_list = get_the_term_list( $product->get_id(), 'location', '<span class="posted_in location">' . _n( 'Location: ', 'Locations: ', count( $location_count ), 'dokan-lite' ), ', ', '</span>' );
echo $location_list;
}
add_action( 'woocommerce_product_meta_end', 'custom_taxonomy_location_on_frontend' );The saved values are now displayed on the Single Product Page as well. By simply clicking on a taxonomy value, you can easily filter and browse related products that belong to the same taxonomy.
Note: In case the filter stops functioning after selecting a taxonomy value, it is recommended to re-save the permalink from the WP Admin Dashboard > Settings > Permalinks screen.
