I'm learning to build a woocommerce+dokan website. When a store owner signs into my platform, they can enter a product they wish to sell. One of the options I want the store owner to describe about their product is its condition as either Never used, Lightly used, Used, or Heavily used.

I am adding a new product attribute "Condition" as shown in the following screenshot:

enter image description here

Now when I sign in as a store owner, I see the option to save the Condition field with this user interface located at the bottom of the product add/edit page:

enter image description here

I want to replace this interface with a more intuitive control such as a <select> menu that offers the four possible condition options.

I'm not comfortable enough with WordPress best practices to do this. So I was about to do the following:

  1. Create a child theme so that I have a place to override the default HTML with some custom HTML.
  2. Write an SQL statement that reads Condition taxonomy/terms directly from the appropriate wp_term* tables and load terms into a php array() which I will use to echo a <select name="prod_condition">...</select> element in the child theme.
  3. For saving the product, create a custom plugin with this hook add_action( 'dokan_store_profile_saved', 'save_condition_field', 15 );. This hook fires AFTER a product has been saved. In my hook, I will read from $_POST['prod_condition'], then save the value by creating an SQL statement that writes directly to the wp_terms_relationships and wp_postmeta tables.

Is that the proper approach to creating a custom UI for saving advance custom fields in a woocommerce+dokan setup? Are there native wordpress/woocommerce/dokan functions or tools I should be leveraging? For example, are there html variable naming conventions I can follow that will circumvent the need for me to write my own SQL create/update statements? Or certain wordpress functions that can easily create a drop down menu that becomes part of the wordpress CRUD process?

My approach seems very brute right now.

  • That has nothing to do with advanced custom fields plugin… It's just the default product attributes UI on your screenshot... Here you have simply added a product attribute "Condition" with 4 terms: "Never used", "Lightly used", "Used" and Heavily used. – LoicTheAztec May 8 '19 at 4:17
  • As interesting as this question is, 3rd party plugin dev support is offtopic here, this site is not the place to ask for WooCommerce dev help, contact their dev support routes, or communities instead. – Tom J Nowell Jun 1 at 9:17

Actually, this ended up being straight forward.

Displaying the drop down

I used this line to get the list of terms for my pa_condition taxonomy:

$attr_condition = get_terms(
    'taxonomy' => 'pa_condition', //empty string(''), false, 0 don't work, and return empty array
    'orderby' => 'name',
    'order' => 'ASC',
    'hide_empty' => false, //can be 1, '1' too

And I used this to get the condition value for the current product (aka post)

$post_condition = get_the_terms($post_id,'pa_condition');

Then it was a simple matter of using a for loop to echo out all the options and setting the appropriate select option for the condition.

Saving the drop down

I first deleted the custom attributes control by making a child theme of the file plugins\dokan-pro\templates\products\product-variations.php and then emptying it of all html content.

Then I made sure I named my select menu and echoed the appropriate html variables in a convention that allows Wordpress to save values without any new backend code like this

   <select name="attribute_values[0][0]" class="dokan-form-control">
        $val = count($post_condition) > 0 ? $post_condition[0]->slug : "";
        foreach($attr_condition as $item) {
            $selected = $val == $item->slug ? ' selected' : '';
            echo '<option value="'.$item->slug.'"'.$selected.'>'.$item->name.'</option>';
    <input type="hidden" name="attribute_names[0]" value="pa_condition" />
    <input type="hidden" name="attribute_position[0]" value="0" />
    <input type="hidden" name="attribute_is_taxonomy[0]" value="1" />
    <input type="hidden" name="attribute_visibility[0]" value="1" />

These html variables will create the appropriate $_POST schema to save custom attribute values from my new drop down menu.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.