Question

我试图更改woocomerce中的结帐字段，从addres1和addres2更改为checkin和checkout。我想在这两个字段上使用Datepiker。这是我已更改的WC_Countries类核心代码的摘录：

            'checkin'  => array(
            'id'           =>'datepicker',
            'label'        => __( 'check in', 'woocommerce' ),
            'placeholder'  => __( 'check in', 'woocommerce' ),
            'required'     => false,
            'class'        => array( 'form-row-wide',),
            'autocomplete' => 'datepicker',
            'priority'     => 50,
        ),
        'checkout'  => array(
            'id'           =>'datepicker',
            'placeholder'  => __( 'check out', 'woocommerce' ),
            'class'        => array( 'form-row-wide'),
            'required'     => false,
            'autocomplete' => 'datepicker',
            'priority'     => 60,

我还添加了

    $('#sandbox-container .input-daterange').datepicker({
});

到主题目录中的custom.scripts.js，但它不起作用......

有没有办法将Datepicker添加到woocommerce的结帐字段中？

Answer 1

首先永远不要覆盖Woocommerce核心文件 ...严格劝阻并避免许多问题。

相反，您可以使用所有数千个可用的钩子，可编辑的模板或扩展现有的类......

您可以尝试以下代码示例，该示例将为其启用 jQuery UI datepicker 添加自定义结帐字段：

// Register main datepicker jQuery plugin script
add_action( 'wp_enqueue_scripts', 'enabling_date_picker' );
function enabling_date_picker() {
    // Only on front-end and checkout page
    if( is_admin() || ! is_checkout() ) return;

    // Load the datepicker jQuery-ui plugin script
    wp_enqueue_script( 'jquery-ui-datepicker' );
    wp_enqueue_style('jquery-ui', "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css", '', '', false);
}

// Add custom checkout datepicker field
add_action( 'woocommerce_before_order_notes', 'datepicker_custom_field' );
function datepicker_custom_field($checkout) {
    $datepicker_slug = 'my_datepicker';

    echo '<div id="datepicker-wrapper">';

    woocommerce_form_field($datepicker_slug, array(
        'type' => 'text',
        'class'=> array( 'form-row-first my-datepicker'),
        'label' => __('My Custom Date-picker'),
        'required' => true, // Or false
    ), '' );

    echo '<br clear="all"></div>';


    // Jquery: Enable the Datepicker
    ?>
    <script language="javascript">
    jQuery( function($){
        var a = '#<?php echo $datepicker_slug ?>';
        $(a).datepicker({
            dateFormat: 'yy-mm-dd', // ISO formatting date
        });
    });
    </script>
    <?php
}

代码进入活动子主题（或活动主题）的function.php文件。经过测试并正常工作。

你会得到类似的东西：

在第一个功能中，您可以轻松更改样式以匹配Bootstap样式......

在Woocommerce结帐字段中启用日期选择器

1 个答案: