我已将几个选择框添加到 WooCommcerce 结帐页面，除了两件我不确定的事情外，一切正常。
验证并应用与页面上其余选择框相同的样式。
我知道的事情。
WooCommerce 使用旧的 select2 库。
当我将以下脚本添加到我的子主题 .js 文件时，它会设置样式 结帐页面上的选择框正确，但会破坏网站上的所有其他选择框，尽管我的 .js 文件的加载顺序。 开始，中间，最后。 jQuery(文档).ready(函数(){ jQuery(".select").select2(); });//结束文档准备好`
**这是我应用到我的 functions.php 的代码，如有任何帮助，我们将不胜感激。 **
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;
}`
最佳答案
像这样将一个类添加到您的选择中:
'input_class' => array('my-select'),
然后在您的 jQuery 中定位该类...
jQuery('.my-select').select2();
关于javascript - 如何向 WooCommerce 结帐页面中的自定义选择框添加验证并应用 select2 样式。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34687005/