Approach for saving a product attribute values with a custom UI in a woocommerce+dokan set up [closed]

Question

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:

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:

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.

Answer 1

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(
array(
    '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">
    <?php
        $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>';
        }
    ?>
    </select>
    <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.