Multi checkbox fields in Woocommerce backend

Question 1

Ive been trying to add a custom field in woocommerce backend where users can multiselect checkboxes for a certain level.

Is it possible to create multiple checkboxes? So far i have this:

woocommerce_wp_checkbox(
    array(
        'id' => '_custom_product_niveau_field',
        'type' => 'checkbox',
        'label' => __('Niveau', 'woocommerce'),
        'options' => array(
            'MBO'   => __( 'MBO', 'woocommerce' ),
            'HBO'   => __( 'HBO', 'woocommerce' ),
            'WO' => __( 'WO', 'woocommerce' )
        )
    )

But that doesnt work... Does woocommerce_wp_checkbox have support for this?

Question 2

2021 Update

2021 Update - Solved issues with:
• in_array() where 2nd argument was a string on start*.
• $thepostid as in some cases it was empty.

That is possible creating a custom function this way:

// New Multi Checkbox field for woocommerce backend
function woocommerce_wp_multi_checkbox( $field ) {
    global $thepostid, $post;

    if( ! $thepostid ) {
        $thepostid = $post->ID;
    }

    $field['value'] = get_post_meta( $thepostid, $field['id'], true );

    $thepostid              = empty( $thepostid ) ? $post->ID : $thepostid;
    $field['class']         = isset( $field['class'] ) ? $field['class'] : 'select short';
    $field['style']         = isset( $field['style'] ) ? $field['style'] : '';
    $field['wrapper_class'] = isset( $field['wrapper_class'] ) ? $field['wrapper_class'] : '';
    $field['value']         = isset( $field['value'] ) ? $field['value'] : array();
    $field['name']          = isset( $field['name'] ) ? $field['name'] : $field['id'];
    $field['desc_tip']      = isset( $field['desc_tip'] ) ? $field['desc_tip'] : false;

    echo '<fieldset class="form-field ' . esc_attr( $field['id'] ) . '_field ' . esc_attr( $field['wrapper_class'] ) . '">
    <legend>' . wp_kses_post( $field['label'] ) . '</legend>';

    if ( ! empty( $field['description'] ) && false !== $field['desc_tip'] ) {
        echo wc_help_tip( $field['description'] );
    }

    echo '<ul class="wc-radios">';

    foreach ( $field['options'] as $key => $value ) {

        echo '<li><label><input
                name="' . esc_attr( $field['name'] ) . '"
                value="' . esc_attr( $key ) . '"
                type="checkbox"
                class="' . esc_attr( $field['class'] ) . '"
                style="' . esc_attr( $field['style'] ) . '"
                ' . ( is_array( $field['value'] ) && in_array( $key, $field['value'] ) ? 'checked="checked"' : '' ) . ' /> ' . esc_html( $value ) . '</label>
        </li>';
    }
    echo '</ul>';

    if ( ! empty( $field['description'] ) && false === $field['desc_tip'] ) {
        echo '<span class="description">' . wp_kses_post( $field['description'] ) . '</span>';
    }

    echo '</fieldset>';
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Related: Multi Select fields in Woocommerce backend

Usage example (for a simple product):

// Add custom multi-checkbox field for product general option settings
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_settings_fields', 20 );
function add_custom_settings_fields() {
    global $post;

    echo '<div class="options_group hide_if_variable"">'; // Hidding in variable products

    woocommerce_wp_multi_checkbox( array(
        'id'    => '_custom_level',
        'name'  => '_custom_level[]',
        'label' => __('Levels', 'woocommerce'),
        'options' => array(
            'MBO'   => __( 'MBO', 'woocommerce' ),
            'HBO'   => __( 'HBO', 'woocommerce' ),
            'WO'    => __( 'WO', 'woocommerce' )
        )
    ) );

    echo '</div>';
}

// Save custom multi-checkbox fields to database when submitted in Backend (for all other product types)
add_action( 'woocommerce_process_product_meta', 'save_product_options_custom_fields', 30, 1 );
function save_product_options_custom_fields( $post_id ){
    if( isset( $_POST['_custom_level'] ) ){
        $post_data = $_POST['_custom_level'];
        // Data sanitization
        $sanitize_data = array();
        if( is_array($post_data) && sizeof($post_data) > 0 ){
            foreach( $post_data as $value ){
                $sanitize_data[] = esc_attr( $value );
            }
        }
        update_post_meta( $post_id, '_custom_level', $sanitize_data );
    }
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

The selected values are correctly saved and displayed. For info the value is an array.

Question 3

Your save function should be like

function woo_add_custom_general_fields_save( $post_id ){

// Customer text ISBN Field
$woocommerce_text_field = $_POST['_ISBN_field'];
if( !empty( $woocommerce_text_field ) )
    update_post_meta( $post_id, '_ISBN_field', esc_attr( $woocommerce_text_field ) );
else
    update_post_meta( $post_id, '_ISBN_field', '' );
}

If !empty( $woocommerce_text_field ) returns true only if $_POST['_ISBN_field'] has some value so the post meta is not updated if $_POST['_ISBN_field'] is empty

Question 4

The answer is very simple… you just forgot to add a key id for your array in the first function, like:

$product_type_options['evisa'] = array( // … …

So in your code:

add_filter( 'product_type_options', 'add_e_visa_product_option' );
function add_e_visa_product_option( $product_type_options ) {
    $product_type_options['evisa'] = array(
        'id'            => '_evisa',
        'wrapper_class' => 'show_if_simple show_if_variable',
        'label'         => __( 'eVisa', 'woocommerce' ),
        'description'   => __( '', 'woocommerce' ),
        'default'       => 'no'
    );

    return $product_type_options;
}

add_action( 'woocommerce_process_product_meta_simple', 'save_evisa_option_fields'  );
add_action( 'woocommerce_process_product_meta_variable', 'save_evisa_option_fields'  );
function save_evisa_option_fields( $post_id ) {
    $is_e_visa = isset( $_POST['_evisa'] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_evisa', $is_e_visa );
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Question 5

Try the following instead:

add_action( 'woocommerce_before_checkout_form', 'conditionally_show_hide_checkout_field' );
function conditionally_show_hide_checkout_field() {
    ?>
    <style>
    p#new_billing_field_field.on { display:none !important; }
    </style>

    <script type="text/javascript">
    jQuery(function($){
        var a = 'input#checkbox_trigger',   b = '#new_billing_field_field'

        $(a).change(function(){
            if ( $(this).prop('checked') === true && $(b).hasClass('on') ) {
                $(b).show(function(){
                    $(b).css({'display':'none'}).removeClass('on').show();
                });
            }
            else if ( $(this).prop('checked') !== true && ! $(b).hasClass('on') ) {
                $(b).fadeOut(function(){
                    $(b).addClass('on')
                });
                $(b+' input').val('');
            }
        });
    });
    </script>
    <?php
}

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_fields' );
function add_custom_checkout_fields( $fields ) {

    $fields['billing']['checkbox_trigger'] = array(
        'type'      => 'checkbox',
        'label'     => __('Checkbox label', 'woocommerce'),
        'class'     => array('form-row-wide'),
        'clear'     => true
    );

    $fields['billing']['new_billing_field'] = array(
        'label'     => __('New Billing Field Label', 'woocommerce'),
        'placeholder'   => _x('New Billing Field Placeholder', 'placeholder', 'woocommerce'),
        'class'     => array('form-row-wide on'),
        'clear'     => true
    );

    return $fields;
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Question 6

Figured out a work around. Since the SalesFlash image was the one being triggered, I just used a blank PNG image to overlay ontop of the product image. Turned all my products into sale items and it works. Not perfect, but I don't need the sale icon anyway.

But if anyone does know of a proper programming solution, I would change it. Thanks.

Multi checkbox fields in Woocommerce backend

Answers

php,wordpress,checkbox,woocommerce,custom-fields