Включение выбора даты в полях оформления заказа Woocommerce

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 :

// 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…