I've added several select boxes to the WooCommcerce checkout page and everything works fine except for two things that I'm not sure about.
Validation and applying the same styles as the rest of the select boxes on the page.
Things I know.
WooCommerce is using the older select2 library.
When I add the below script to my child-theme .js file it styles the select boxes correctly on the checkout page but breaks all other select boxes on the site, despite the order of which my .js file is loaded. Beginning,middle,last. jQuery(document).ready(function(){ jQuery(".select").select2(); }); // END document ready`
**Here is the code i'm applying to my functions.php any help would be much appreciated. **
function cstm_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'scripts', get_stylesheet_directory_uri() . '/js/scripts.js' );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'scripts' );
}
add_action( 'wp_enqueue_scripts', 'cstm_scripts_with_jquery' );
add_action('woocommerce_before_order_notes', 'my_custom_checkout_field');
function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field"><h2>'.__('A few quick questions.').'</h2>';
woocommerce_form_field( 'quantity', array(
'type' => 'select',
'required' => true,
'class' => array('form-row-wide'),
'label' => __('Quantity?'),
'placeholder' => __('Enter something'),
'options' => array(
'Standard Size' => __('Standard Size', 'woocommerce' ),
'Other' => __('Other', 'woocommerce' )
)//end of options
), $checkout->get_value( 'quantity' ));
woocommerce_form_field( 'potannusge', array(
'type' => 'select',
'required' => true,
'class' => array('form-row-wide'),
'label' => __('Potential Annual Usage?'),
'placeholder' => __('Enter something'),
'options' => array(
'Less than 100k' => __('Less than 100kg', 'woocommerce' ),
'100 kg - 500 kg' => __('100 kg - 500 kg', 'woocommerce' ),
'500 kg - 1000 kg' => __('500 kg - 1000 kg', 'woocommerce' ),
'Greater than 1000 kg' => __('Greater than 1000 kg', 'woocommerce' )
)//end of options
), $checkout->get_value( 'potannusge' ));
woocommerce_form_field( 'proapp', array(
'type' => 'select',
'required' => true,
'class' => array('form-row-wide'),
'label' => __('Project / Application:'),
'placeholder' => __('Enter something'),
'options' => array(
'Pet' => __('Pet', 'woocommerce' ),
'Skin Care' => __('Skin Care', 'woocommerce' ),
'Food' => __('Food', 'woocommerce' ),
'Dietary Supplement' => __('Dietary Supplement', 'woocommerce' ),
'Other' => __('Other', 'woocommerce' )
)//end of options
), $checkout->get_value( 'proapp' ));
woocommerce_form_field( 'protype', array(
'type' => 'select',
'required' => true,
'class' => array('form-row-wide'),
'label' => __('Project Type:'),
'placeholder' => __('Enter something'),
'options' => array(
'New' => __('New', 'woocommerce' ),
'Enhancement' => __('Enhancement', 'woocommerce' ),
'Other' => __('Other', 'woocommerce' )
)//end of options
), $checkout->get_value( 'protype' ));
woocommerce_form_field( 'prolength', array(
'type' => 'select',
'required' => true,
'class' => array('form-row-wide'),
'label' => __('Project Length:'),
'placeholder' => __('Enter something'),
'options' => array(
'Immediate Need' => __('Immediate Need', 'woocommerce' ),
'0-6 Months' => __('0-6 Months', 'woocommerce' ),
'6-12 Months' => __('6-12 Months', 'woocommerce' )
)//end of options
), $checkout->get_value( 'prolength' ));
woocommerce_form_field( 'decismakr', array(
'type' => 'select',
'required' => true,
'class' => array('form-row-wide'),
'label' => __('Decision Maker Role:'),
'placeholder' => __('Enter something'),
'options' => array(
'Purchaser' => __('Purchaser', 'woocommerce' ),
'Formulator only' => __('Formulator only', 'woocommerce' ),
'Consultant' => __('Consultant', 'woocommerce' )
)//end of options
), $checkout->get_value( 'decismakr' ));
echo '</div>';
}
/**
* Process the checkout
**/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
global $woocommerce;
// Check if set, if its not set add an error.
if (!$_POST['quantity'])
$woocommerce->add_error( __('Please select an answer. ') );
}
/**
* Update the user meta with field value
**/
add_action('woocommerce_checkout_update_user_meta', 'my_custom_checkout_field_update_user_meta');
function my_custom_checkout_field_update_user_meta( $user_id ) {
if ($user_id && $_POST['quantity']) update_user_meta( $user_id, 'quantity', esc_attr($_POST['quantity']) );
if ($user_id && $_POST['potannusge']) update_user_meta( $user_id, 'potannusge', esc_attr($_POST['potannusge']) );
if ($user_id && $_POST['proapp']) update_user_meta( $user_id, 'proapp', esc_attr($_POST['proapp']) );
if ($user_id && $_POST['protype']) update_user_meta( $user_id, 'protype', esc_attr($_POST['protype']) );
if ($user_id && $_POST['prolength']) update_user_meta( $user_id, 'prolength', esc_attr($_POST['prolength']) );
if ($user_id && $_POST['decismakr']) update_user_meta( $user_id, 'decismakr', esc_attr($_POST['decismakr']) );
}
/**
* Update the order meta with field value
**/
add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');
function my_custom_checkout_field_update_order_meta( $order_id ) {
if ($_POST['quantity']) update_post_meta( $order_id, 'Quantity', esc_attr($_POST['quantity']));
if ($_POST['potannusge']) update_post_meta( $order_id, 'Potential Annual Usage', esc_attr($_POST['potannusge']));
if ($_POST['proapp']) update_post_meta( $order_id, 'Project Application', esc_attr($_POST['proapp']));
if ($_POST['protype']) update_post_meta( $order_id, 'Project Type', esc_attr($_POST['protype']));
if ($_POST['prolength']) update_post_meta( $order_id, 'Project Length', esc_attr($_POST['prolength']));
if ($_POST['decismakr']) update_post_meta( $order_id, 'Decision Maker', esc_attr($_POST['decismakr']));
}
/**
* Add the field to order emails
**/
add_filter('woocommerce_email_order_meta_keys', 'my_custom_checkout_field_order_meta_keys');
function my_custom_checkout_field_order_meta_keys( $keys ) {
$keys[] = 'Quantity';
$keys[] = 'Potential Annual Usage';
$keys[] = 'Project Application';
$keys[] = 'Project Type';
$keys[] = 'Project Length';
$keys[] = 'Decision Maker';
return $keys;
}`
