But here’s the real kicker: I will also ensure seamless integration with Dokan, the ultimate multivendor solution for WordPress. That means, your custom taxonomies will not just appear on the backend; they will also make a stunning appearance on the Dokan Vendor Dashboard.
If you are familiar with WordPress, you are likely aware of taxonomies and how they function. But have you ever dived into the realm of custom taxonomies? Brace yourself, because, in this article, I am not only going to explore how to create custom taxonomies in WordPress but I will especially focus on creating them for the highly popular ‘product’ post type used in WooCommerce.
And the icing on the cake? I will even demonstrate how to display the saved values on the single product page of WooCommerce, creating a cohesive and visually appealing user experience.
So, buckle up and get ready to dive into the code.
Let’s begin by creating a custom taxonomy for the product post type. In this case, I have chosen “Color” as the taxonomy name. The code for implementing this taxonomy would look something like the following:
use WeDevs\Dokan\Walkers\TaxonomyDropdown;
#-- Custom Taxonomy Type - Color (For Product Post Type) --#
function product_custom_color_taxonomy_item() {
$labels = [
'name' => 'Colors',
'singular_name' => 'Color',
'menu_name' => 'Colors',
'all_items' => 'All Color',
'parent_item' => 'Parent Color',
'parent_item_colon' => 'Parent Color:',
'new_item_name' => 'New Color Name',
'add_new_item' => 'Add New Color',
'edit_item' => 'Edit Color',
'update_item' => 'Update Color',
'separate_items_with_commas' => 'Separate Color with commas',
'search_items' => 'Search Color',
'add_or_remove_items' => 'Add or remove Color',
'choose_from_most_used' => 'Choose from the most used Color',
];
$args = [
'labels' => $labels,
'hierarchical' => true,
'public' => true,
'show_ui' => true,
'show_admin_column' => true,
'show_in_nav_menus' => true,
'show_tagcloud' => true,
];
register_taxonomy( 'color', 'product', $args );
}
add_action( 'init', 'product_custom_color_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
After implementing the code, you will notice that the “Colors” taxonomy is now accessible for the product post type. This means that you can now easily assign and save the color type from the backend.
To further enhance the functionality, let’s integrate support for the Colors taxonomy on the “Dokan Add New Product” page. The code snippet below demonstrates how this can be accomplished:
#-- Custom Taxonomy (Color) Field on the Add New Product Form --#
function custom_taxonomy_color_on_new_product_form() {
$color_args = wp_dropdown_categories(
[
'hierarchical' => 1,
'hide_empty' => 0,
'name' => 'color[]',
'id' => 'color',
'taxonomy' => 'color',
'orderby' => 'name',
'title_li' => '',
'class' => 'dokan-form-control dokan-select2',
'exclude' => '',
'walker' => new TaxonomyDropdown(),
'echo' => 0
]
);
echo '<div class="dokan-form-group">';
echo '<label for="color" class="form-label">Colors</label>';
echo str_replace( '<select', '<select data-placeholder="' . esc_html__( 'Select product colors', 'dokan-lite' ) . '" multiple="multiple" ', $color_args );
echo '</div>';
}
add_action( 'dokan_new_product_after_product_tags', 'custom_taxonomy_color_on_new_product_form' );Next, let’s proceed with saving the field values when creating a new product. Additionally, the following code will ensure that the field values are also updated when modifying product data from the Edit Product Page.
#-- Save Custom Taxonomy (Color) Field Values --#
function save_vendor_custom_taxonomy_color( $product_id, $postdata ) {
if( !empty( $postdata['color'] ) ){
$color_ids = array_map( 'absint', (array) $postdata['color'] );
wp_set_object_terms( $product_id, $color_ids, 'color' );
}
}
add_action( 'dokan_new_product_added', 'save_vendor_custom_taxonomy_color', 10, 2 );
add_action( 'dokan_product_updated', 'save_vendor_custom_taxonomy_color', 10, 2 );Having successfully implemented the code to save the values from the Edit Product Page field, our subsequent task is to display these values on the same page, alongside the respective field.
#-- Custom Taxonomy Field (Color) on the Edit Product Form --#
function custom_taxonomy_color_on_edit_product_form( $post, $post_id ){
$term = wp_get_post_terms( $post_id, 'color', [ 'fields' => 'ids' ] );
$color_args = wp_dropdown_categories(
[
'hierarchical' => 1,
'hide_empty' => 0,
'name' => 'color[]',
'id' => 'color',
'taxonomy' => 'color',
'orderby' => 'name',
'title_li' => '',
'class' => 'dokan-form-control dokan-select2',
'exclude' => '',
'selected' => $term,
'walker' => new TaxonomyDropdown( $post_id ),
'echo' => 0
]
);
echo '<div class="dokan-form-group">';
echo '<label for="color" class="form-label">Colors</label>';
echo str_replace( '<select', '<select data-placeholder="' . esc_html__( 'Select product colors', 'dokan-lite' ) . '" multiple="multiple" ', $color_args );
echo '</div>';
}
add_action( 'dokan_product_edit_after_product_tags', 'custom_taxonomy_color_on_edit_product_form', 10, 2 );As a result of the recent changes, you will see that the custom taxonomy field is now visible on both the Add New and Edit Product pages. Furthermore, these values are being successfully saved.
The next objective is to ensure that the value appears on the Single Product Page of WooCommerce, and the following code will do the task:
#-- Show Custom Taxonomy (Color) Values on the Single Product Page --#
function custom_taxonomy_color_on_frontend() {
global $product;
$color_count = wp_get_post_terms( $product->get_id(), 'color', [ 'fields' => 'ids' ] );
$color_list = get_the_term_list( $product->get_id(), 'color', '<span class="posted_in color">' . _n( 'Color: ', 'Colors: ', count( $color_count ), 'dokan-lite' ), ', ', '</span>' );
echo $color_list;
}
add_action( 'woocommerce_product_meta_end', 'custom_taxonomy_color_on_frontend' );The saved values are now being displayed on the Single Product Page as well. By clicking on a taxonomy value, you can conveniently filter and view related products belonging 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.
First i want to thank you for the wonderful solution, It saved a lot of time, i have an issue tho , I just want vendor to choose only 1 option , how can i achieve that? Would appreciate if you can reply.
I have published another article on single select. You can take a look at that: https://tanjirsdev.com/custom-taxonomy-in-dokan-single-select/
I am looking if it can be limited to max 2 choices