Dokan Category UI update

Since Dokan version 3.6.2 on July 15, 2022, we have had multistep product category selection while adding/editing products from the vendor dashboard. This was a great feature to add and will surely help vendors a lot while assigning the category. Previously, the category selection was not user-friendly and with the Dokan category UI update, the store owners can easily select multiple categories as well sub-categories.

Dokan team has added hooks in the 3.7.0 release. This is in terms of the developers. It will provide an easy way to do modifications. This will be really helpful to show/hide specific fields based on the category. Here is one simple example of the same:

//hook runs when the category is selected.
wp.hooks.addAction( 'dokan_selected_multistep_category', 'dokan-multistep-category', function ( selected_cat ) {
 if( selected_cat == '10' ) { // ex. cloth category
  jQuery( ".acf-fields.acf-form-fields .acf-field" ).hide(); // hide all custom fields
  jQuery( ".acf-field-62a929e23863f" ).show(); //show clothes custom fields
 }
});

You can add the above code in the JS file or load it in the footer using WordPress hooks.

The issue now is how to load the page with the category that is now selected. This is also very easy. You can get its value using the below code:

// selected category value on page load
selected_cat = jQuery(".dokan_chosen_product_cat").val();

// if you wish to do anything now with the selected category, you can do it using
if( selected_cat == '10' ) { // ex. cloth category
 jQuery( ".acf-fields.acf-form-fields .acf-field" ).hide(); // hide all custom fields
 jQuery( ".acf-field-62a929e23863f" ).show(); //show clothes custom fields
}

Hope the Dokan category UI update post will help you to do the customization based on the category selection. If you wish to apply the custom fields in the vendor dashboard without any code, ACF For Dokan PRO will help you. It is a few clicks job.