Question

根据WC文档，如果我想在结帐区域添加新字段，我应该在functions.php:

中编写以下代码

/* Add the field to the checkout*/
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');

function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field" class="my_new_field"><h2>' . __('My Field') . '</h2>';

woocommerce_form_field( 'my_field_name', array(
    'type'          => 'text',
    'class'         => array('my-field-class form-row-wide'),
    'label'         => __('Fill in this field'),
    'placeholder'   => __('Enter something'),
), $checkout->get_value('my_field_name'));

echo '</div>';
}

如果我想编辑标签或占位符字段，那么我还应该使用functions.php中的其他代码：

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['order']['order_comments']['placeholder'] = 'My new placeholder';
$fields['order']['order_comments']['label'] = 'My new label';

return $fields;
}

考虑上述代码，如何在Woocommerce中添加字段掩码？

我之前在使用Jquery（来自Wordpress）的html网站上做过这个，但我无法弄清楚如何在Woocommerce中做到这一点。

Fyg，我已经尝试过插件＆＃34; WooCommerce Extra Checkout Fields for Brazil＆＃34;而且它没有正常工作。

Answer 1

正如我在评论中所说，我会在您的表单字段中添加一个自定义类，然后使用maskedinput脚本来定位该类。

首先，我们将注册我们需要的脚本。这假设您正在构建自定义插件，并且以下代码段位于基本插件文件中，并且脚本位于名为js的文件夹中：

add_action( 'wp_enqueue_scripts', 'so_41742982_register_scripts' );
function so_41742982_register_scripts(){
    wp_register_script( 'jquery.maskedinput', plugins_url( 'js/jquery.maskedinput.js', dirname(__FILE__) ), array( 'jquery' ), '1.0', true );
    wp_register_script( 'your-script', plugins_url( 'js/'your-script.js', dirname(__FILE__) ), array( 'jquery', 'jquery.maskedinput' ), '1.0', true );
}

然后我们将按照您已经完成的方式添加您的字段。但请注意，通过woocommerce_form_field()添加了额外的CLASS：

/* Add the field to the checkout*/
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');

function my_custom_checkout_field( $checkout ) {

    wp_enqueue_script( 'jquery.maskedinput' );
    wp_enqueue_script( 'your-script' );

    echo '<div id="my_custom_checkout_field" class="my_new_field"><h2>' . __('My Field') . '</h2>';

    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'text',
        'class'         => array('my-custom-mask my-field-class form-row-wide'),
        'label'         => __('Fill in this field'),
        'placeholder'   => __('Enter something'),
    ), $checkout->get_value('my_field_name'));

    echo '</div>';
}

现在，在您的javascript文件js/your-script.js中，您将按照Maskedinput说明操作，并在之前定义的自定义类上调用.mask插件。

jQuery( document ).ready( function($) {
   $(".my-custom-mask").mask("(999) 999-9999");
});

如何在Woocommerce字段中包含掩码？例如。电话：（99）9999-9999

1 个答案: