WooCommerce Multi Select for Single Product Field

1 Views

I am trying to add the list box on the single product page, I was wondering no option for multiselect in woocommerce, For get_option fields woocommerce supporting multiselect but for post_meta woocommerce support only single select, Not sure is there any limitation in woocommerce or i could miss something to get multiselect? Here is the below code i tried 

 function create_multiselect() { 

    woocommerce_wp_select(array(
                'id' => 'newoptions',
                'class' => 'newoptions',
                'label' => __('Testing Multiple Select', 'woocommerce'),
                'options' => array(
                    '1' => 'User1',
                    '2' => 'User2',
                    '3' => 'User3',
                ))
            );

    }

    add_action("woocommerce_product_options_pricing","create_multiselect");

Any Suggestion would be great.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. It is not necessary to create a new function. The woocommerce_wp_select handles this out of the box. One of the attributes available is the custom_attributes which can accept an array. If you pass in an array('multiple'=>'multiple) then it renders a multiselect. In order to serialize and handle the input, you just provide a name[] in the name field and it works like magic. Here is an example –

    woocommerce_wp_select(
    array(
        'id' => '_cb_days_available',
        'name' => '_cb_days_available[]',
        'label' => __('Days Offered', 'woocommerce'),
        'description' => 'Which days of the week is this charter available?',
        'default' => get_option('cb_open_days'),
        'desc_tip' => 'true',
        'class' => 'cb-admin-multiselect',
        'options' => array(
            'Mon' => 'Monday',
            'Tue' => 'Tuesday',
            'Wed' => 'Wednesday',
            'Thu' => 'Thursday',
            'Fri' => 'Friday',
            'Sat' => 'Saturday',
            'Sun' => 'Sunday'
        ),
        'custom_attributes' => array('multiple' => 'multiple')
    )
);

  2. woocommerce_wp_select() function does not support multiselect, you can open the wc-meta-box-functions.php file in /woocommerce/includes/admin directory to see the default behavior.

    But what’s stopping you to create your own function that will be based on the default Woo function, and add the required features, or even change the default function ( but still, modifying the plugin files is not the best practice ). Here’s an example of how to write a new function with multiple support, the only changes from original are added support for name and multiple attributes, and different logic for the selected items ( since post meta is now an array ).

    function woocommerce_wp_select_multiple( $field ) {
    global $thepostid, $post, $woocommerce;

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

    echo '<p class="form-field ' . esc_attr( $field['id'] ) . '_field ' . esc_attr( $field['wrapper_class'] ) . '"><label for="' . esc_attr( $field['id'] ) . '">' . wp_kses_post( $field['label'] ) . '</label><select id="' . esc_attr( $field['id'] ) . '" name="' . esc_attr( $field['name'] ) . '" class="' . esc_attr( $field['class'] ) . '" multiple="multiple">';

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

        echo '<option value="' . esc_attr( $key ) . '" ' . ( in_array( $key, $field['value'] ) ? 'selected="selected"' : '' ) . '>' . esc_html( $value ) . '</option>';

    }

    echo '</select> ';

    if ( ! empty( $field['description'] ) ) {

        if ( isset( $field['desc_tip'] ) && false !== $field['desc_tip'] ) {
            echo '<img class="help_tip" data-tip="' . esc_attr( $field['description'] ) . '" src="' . esc_url( WC()->plugin_url() ) . '/assets/images/help.png" height="16" width="16" />';
        } else {
            echo '<span class="description">' . wp_kses_post( $field['description'] ) . '</span>';
        }

    }
    echo '</p>';
}

    Example of how to use the function:

    woocommerce_wp_select_multiple( array(
    'id' => 'newoptions',
    'name' => 'newoptions[]',
    'class' => 'newoptions',
    'label' => __('Testing Multiple Select', 'woocommerce'),
    'options' => array(
        '1' => 'User1',
        '2' => 'User2',
        '3' => 'User3',
    ))
);