Integrate custom checkboxes in dokan for Woocommerce product

Question

I'm new in the code world and I'm using Woocommerce with the Dokan plugin.

I added the code below to the add product page, but I need this code to be integrate with nexts pages in Woocommerce as edit page or single product page:

add_action( 'dokan_new_product_after_product_tags','new_product_field',10 );

function new_product_field(){ ?>

     <div class="dokan-form-group">

     <div>
              <span>Zona de trabajo</span><br>
   <label><input type="checkbox" value="Capital Federal" name="opcion1" />Capital Federal</label><br>
   <label><input type="checkbox" value="BsAs G.B.A Norte" name="opcion2" />BsAs G.B.A Norte</label><br>
   <label><input type="checkbox" value="BsAs G.B.A Oeste" name="opcion3" />BsAs G.B.A Oeste</label><br>
   <label><input type="checkbox" value="BsAs G.B.A Sur" name="opcion4" />BsAs G.B.A Sur</label><br>
     
       </div>

I am wondering, how can I make to integrate the code with hooks with the rest of the page.

I only have the table, but its doesn't nothing. Any help please?

Answer 1

Inspired from this code found on Github (from @nayemDevs), you will find below your revisited code with some additional functions that should handle some of your requirements (commented):

// Field Settings for Extra checkboxes
function get_work_option_field_settings(){
    $text_domain = 'dokan-lite';

    return array(
        'name'   => 'work_zone',
        'title'  =>  __("Zona de trabajo", $text_domain),
        'fields' => array(
            '1'  => __("Capital Federal",  $text_domain),
            '2'  => __("BsAs G.B.A Norte", $text_domain),
            '3'  => __("BsAs G.B.A Oeste", $text_domain),
            '4'  => __("BsAs G.B.A Sur",   $text_domain),
        ),
    );
}

// Adding extra field on New product popup/without popup form
add_action( 'dokan_new_product_after_product_tags', 'add_dokan_new_product_custom_fields', 10 );
function add_dokan_new_product_custom_fields(){
    $settings = get_work_option_field_settings(); // Load field settings
    $field_id = $settings['name']; // Get custom field metakey

    echo '<div class="dokan-form-group">
        <span class="field-title">' . $settings['title'] . '</span><br>';

    // Loop  through field option settings
    foreach ( $settings['fields'] as $key => $label ) {
        echo '<label><input type="checkbox" class="dokan-form-control" name="'.$field_id.$key.'" value="'.$key.'" /> '.$label.'</label><br>';
    }
    echo '</div>';
}

// Saving product field data for edit and update
add_action( 'dokan_new_product_added','save_dokan_product_custom_fields', 10, 2 );
add_action( 'dokan_product_updated', 'save_dokan_product_custom_fields', 10, 2 );
function save_dokan_product_custom_fields( $product_id, $postdata = null ){
    if ( ! dokan_is_user_seller( get_current_user_id() ) ) {
        return;
    }

    $settings   = get_work_option_field_settings(); // Load field settings
    $field_id   = $settings['name']; // Get custom field metakey
    $meta_value = array(); // Initializing

    // Loop  through field option settings
    foreach ( $settings['fields'] as $key => $label ) {
        if ( ! empty( $postdata[$field_id.$key] ) ) {
            // add each selected option to the array
            $meta_value[] = esc_attr( $postdata[$field_id.$key] ); 
        }
    }

    update_post_meta( $product_id, $field_key, $meta_value ); // Save
}

// Showing field data on product edit page
add_action( 'dokan_product_edit_after_product_tags','add_dokan_edit_product_custom_fields', 99, 2 );
function add_dokan_edit_product_custom_fields( $post, $post_id ){
    $settings   = get_work_option_field_settings(); // Load field settings
    $field_id   = $settings['name']; // Get custom field metakey
    $values   = get_post_meta( $post_id, $field_id, true ); // Get custom field array of selected options

    echo '<div class="dokan-form-group">
        <span class="field-title">' . __("Zona de trabajo", 'dokan-lite') . '</span><br>';

    // Loop  through field option settings
    foreach ( $settings['fields'] as $key => $label ) {
        $checked = ! empty($values) && in_array($key, $values) && $post_id > 0 ? 'checked="checked" ' : '';
        echo '<label><input type="checkbox" class="dokan-form-control" name="'.$field_id.$key.'" value="'.$key.'" '.$checked.'/>'.$label.'</label><br>';
    }
    echo '</div>';
}

// Display values on single product page
add_action( 'woocommerce_single_product_summary','display_single_product_extra_field_values', 13 );
function display_single_product_extra_field_values(){
    global $product;

    if ( empty( $product ) ) {
        return;
    }

    $settings   = get_work_option_field_settings(); // Load field settings
    $field_id   = $settings['name']; // Get custom field metakey
    $meta_value = get_post_meta( $product->get_id(), $field_id, true ); // Get custom field array of selected options
    $values     = []; // Initializing

    if ( ! empty( $meta_value ) ) {
        // Loop  through field option settings
        foreach ( $settings['fields'] as $key => $label ) {
            if ( in_array($key, $meta_value) ) {
                $values[] = $label;
            }
        }

        echo '<p class="' . $settings['name'] . '-details"><strong>' . $settings['title'] . '</strong>: <span>'. implode('</span>, <span>', $values) . '</span>.</p>';
    }
}

Code goes in functions.php file of the active child theme (or active theme). It could work.

As I can't really test the code for real, you will need to test it and maybe make some changes to it.

The first function handle your fields settings, title, field options…