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?

Please, some feed back will be appreciated on the answer below. — LoicTheAztec

LoicTheAztec LoicTheAztec · Accepted Answer · 2020-10-06T01:12:24

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…

Integrate custom checkboxes in dokan for Woocommerce product

1 Answers